vue2，使用element中的Upload 上传文件，自定义上传http-request上传，上传附件支持多选，多个文件只发送一次请求，代码里有注释-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue2，使用element中的Upload 上传文件，自定义上传http-request上传，上传附件支持多选，多个文件只发送一次请求，代码里有注释。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

复制直接使用，组件根据multiple是否多选来返回附件内容，支持多选就返回数据附件，则返回一个附件对象。文章来源地址https://www.toymoban.com/news/detail-696019.html

//uploadFiles.vue

<template>
  <div>
    <el-upload
      class="avatar-uploader"
      action="#"
      :accept="accept"
      :show-file-list="false"
      :http-request="HttpRequest"
      :multiple="multiple"
      :on-change="onChangeFile"
      ref="uploadFileRef"
    >
      <slot />
    </el-upload>
  </div>
</template>

<script>
export default {
  /**
   * limitation // 文件上传限制大小 type number  50就是50Mb
   * accept // 上传文件类型限制 accept=".xls, .xlsx"
   * multiple// 是否支持多选
   */
  name: "uploadFiles",
  props: ['limitation','accept','multiple'],
  data() {
    return {
      flag:true, // 节流控制
      filesList:[]  // 上传的附件内容
    }
  },
  methods: {
    // 触发父组件的fileRet方法，并返回所选附件数据Array
    updateHeading(files) {
      this.$emit('fileRet',files);
      this.emptyData();
    },
    HttpRequest(data){
      const isLt50M = data.file.size / 1024 / 1024 < this.limitation; // 限制文件大小
      if (!isLt50M) {
        this.$message.error('上传头像图片大小不能超过 50MB!');
        return
      }
      // 调用后台接口逻辑
      this.throttle(()=>{
        let retFile;
        // 如何支持多文件上传，返回附件数组，则返回当个文件对象
        if (this.multiple){
          retFile = this.filesList.map(o=>o.raw)
        } else {
          retFile = data.file
        }
        // 附件上传参数用formData.append('file',retFile)  
        this.updateHeading(retFile)
      },600)
    },
    // 清空已上传的附件数据，初始化
    emptyData() {
      this.$refs.uploadFileRef && this.$refs.uploadFileRef.clearFiles();
      this.filesList = [];
    },
    //使用节流的方式去触发提交，避免多上传附件时，选几个附件就会触发几次提交
    throttle(fn,delay){
      if(this.flag){
        setTimeout(() =>{ fn();this.flag = true },delay)
      }
      this.flag = false;
    },
    onChangeFile(file,fileList){
      this.filesList = fileList
    },
  },
  mounted() {},
  computed: {},
  watch: {}
}
</script>

到了这里，关于vue2，使用element中的Upload 上传文件，自定义上传http-request上传，上传附件支持多选，多个文件只发送一次请求，代码里有注释的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！