element-plus upload上传

最新推荐文章于 2025-05-28 01:26:26 发布

xsjCoding

最新推荐文章于 2025-05-28 01:26:26 发布

阅读量637

点赞数 4

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/xushijie89/article/details/136508474

本文详细介绍了如何在Vue3项目中使用ElementPlus2.4.3版本的上传组件，包括FormData的使用、自定义上传方法和处理上传进度。还展示了如何调用后台API进行文件上传操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element-plus 2.4.3

<script>
const submitUpload = () => {
  // 单文件
  proxy.$refs["uploadRef"].submit();
}

const uploadFile = (options) => {
  let formData = new FormData();
  formData.append("file", options.file)
  return uploadFileWithParam(formData, (e) => {
    const percent = parseInt(
        ((e.loaded / e.total) * 100) | 0,
        10
    )
    options.onProgress({percent})
  })
}

const onclickClear = () => {
  fileList.value = []
}

const onSuccess = (response, file, fileList) => {
};

const onError = (response, file, fileList) => {
};
</script>

<template>
  <div>
    <el-upload
        ref="uploadRef"
        drag
        multiple
        accept=".txt,.zip"
        action="#"
        v-model:file-list="fileList"
        :auto-upload="false"
        :on-success="onSuccess"
        :on-error="onError"
        :http-request="uploadFile"
    >
      <el-icon class="el-icon--upload">
        <upload-filled/>
      </el-icon>
      <div class="el-upload__text">
        Drop file here or <em>click to upload</em>
      </div>

      <template #tip>
        <div class="el-upload__tip">
          提示信息
        </div>
      </template>
    </el-upload>

    <el-button type="success" @click="submitUpload">
      上传服务器
    </el-button>
    <el-button type="danger" @click="onclickClear">
      清空列表
    </el-button>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-upload-list__item) {
  margin-bottom: 10px;
}

:deep(.el-upload-list__item .el-progress) {
  top: 10px;
}
</style>

api接口

export function uploadFileWithParam(data, onUploadProgress) {
    return request({
        url: '/data/upload',
        headers: {
            repeatSubmit: false
        },
        method: 'post',
        data: data,
        timeout: 1000 * 60 * 60,
        onUploadProgress
    })
}