element UI使用Upload 处理多文件上传

1. 在选取文件后 不立即进行上传；
2. 不使用默认的显示已上传文件列表，自己写样式；
3. 当个文件大小不能超过 20MB；
4. 支持多选文件

<el-upload
   class="biz_upload"
   ref="J_uploadBtn"
   action="#"
   multiple
   :limit="maxFileNum"
   :accept="fileType.join(',')"
   :auto-upload="false"
   :show-file-list="false"
   :file-list="tempfileList"
   :on-exceed="handleExceed"
   :on-change="handleChange"
   :http-request="handleAvatarSuccess">
   <el-button slot="trigger" size="small" type="primary" icon="el-icon-upload">选取文件</el-button>
<!-- <div slot="tip" class="el-upload__tip">单个文件不超过20MB</div>-->
 </el-upload>
 <template v-if="tempfileList.length > 0">
   <div v-for="(item, index) in tempfileList" :key="index">
     <span>{{item.name}}</span>
     <span class="delete" @click="handleRemove(index)">×</span>
   </div>
 </template>

/**
 * el-upload 处理多文件上传（接口有特殊处理）
 **/
handleAvatarSuccess(res) {
  // console.log(res)
},
handleChange(files, fileList) {
  const isLt20M = files.size < maxFileSize;
  let errorFlag = false;
  if (!isLt20M) {
    this.$message.info(files.name + '文件大小不能超过 20MB!');
    errorFlag = true;
  }
  if(errorFlag) {
    return false;
  }
  this.tempfileList.push(files);
},
handleRemove(index) {
  this.tempfileList.splice(index, 1);
},
handleExceed(files, fileList) {
  this.$message.warning(`当前限制选择 ${this.maxFileNum} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
}

获取文件流tempfileList[i].raw

watch: {
	tempfileList: function (newVal, oldVal) {
	  if (newVal && newVal.length) {
	    this.editForm.imgFile = [];
	    newVal.forEach(item => {
	      this.editForm.imgFile.push(item.raw)
	    })
	  }
	}
}

接口处理
headers设置
'Content-Type': 'multipart/form-data'

transformRequest: [function (data, headers) {
  const formData = new FormData()
  for (const key of Object.keys(data)) {
    if ((data[key] || data[key] === '') && key !== "imgFile") {
      formData.append(key, data[key])
    }
  }
  for (let item of data.imgFile) {
    formData.append("imgFile", item);
  }
  return formData
}]

最后

以上就是阳光大叔最近收集整理的关于element UI使用Upload 处理多文件上传的全部内容，更多相关element内容请搜索靠谱客的其他文章。