elementui组件el-upload实现批量文件上传

el-upload组件上传文件时,每传一个文件会调一次接口,所以当上传多个文件的时候,有 n 个文件就要调 n 次接口。

刚好之前工作中遇到使用el-upload组件批量上传文件的需求,来看看怎么实现。

思路:

1.取消组件的自动上传,使用自定义上传

2.组件开启多选文件

3.使用formData上传

html代码如下:

html 复制代码
<el-upload
      multiple
      action="#"
      :http-request="handleHttpRequest"
      :before-upload="handleBeforeUpload"
      :file-list="fileList"
      :limit="limit"
      :requestUrl="requestUrl"
      :show-file-list="true"
      class="upload-file-uploader"
      ref="fileUpload"
    >
      <!-- 上传按钮 -->
      <el-button size="mini" type="primary">选取文件</el-button>

      <!-- 上传提示 -->
      <div class="el-upload__tip" slot="tip" v-if="showTip">
        请上传
        <template v-if="fileSize">
          大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
        </template>
        <template v-if="fileType">
          格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
        </template>
        的文件
      </div>
    </el-upload>
    <el-button size="mini" type="primary" @click="submitUpload">上传</el-button>

data数据定义:

javascript 复制代码
data() {
    return {
      limit: 50;
      uploadList: [],
      baseUrl: process.env.VUE_APP_BASE_API,
      fileList: [],
      fileData: [],
    };
  },

methods定义方法:

javascript 复制代码
  methods: {
    // 覆盖默认的上传行为
    handleHttpRequest(obj) {
      this.fileData.push(obj.file);
    },
    submitUpload() {
      let formData = new FormData();
      for (let i = 0; i < this.fileData.length; i++) {
        formData.append("file", this.fileData[i]);
      }
      uploadFileResource(formData).then((res) => {
        if (res.code == "200") {
          this.$message.success("上传成功");
          this.uploadList = res.data.map((item)=>{
            return { name: item.fileName, url: item.url };
          })
          this.uploadList = [];
          this.$modal.closeLoading();
        } else {
          this.$message.error("上传失败");
        }
      });
    },
    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      // 校检文件类型
      if (this.fileType) {
        const fileName = file.name.split(".");
        const fileExt = fileName[fileName.length - 1];
        const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
        if (!isTypeOk) {
          this.$modal.msgError(
            `文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
          );
          return false;
        }
      }
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      return true;
    },
}

接口定义:

javascript 复制代码
// 上传文件
export function uploadFileResource(data) {
  return request({
    url: '/common/uploadFileResource',
    method: 'post',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, // 这句很重要,以formData的方式上传
    data
  })
}

上传效果图:

相关推荐
学不会•1 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic5 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年6 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder6 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727576 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架