el-upload选择多个文件同时上传带参,on-change校验文件列表数据删除文件

53 阅读 0 评论 35 点赞

我是靠谱客的博主俭朴裙子，最近开发中收集的这篇文章主要介绍el-upload选择多个文件同时上传带参,on-change校验文件列表数据删除文件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

样式：

form表单代码

<el-form>
<el-form-item>
  <el-row>
    <el-col :span="24">
      <el-form-item label="采集任务" prop="taskId">
        <el-select v-model="form.taskId" filterable placeholder="请选择">
          <el-option
            v-for="item in taskOptions"
            :key="item.id"
            :label="item.taskName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-col>
  </el-row>
</el-form-item>
<el-form-item>
  <el-upload
    ref="upload"
    action="/as"
    multiple
    :http-request="handleUpload"
    :on-change="handleChangeFile"
    :auto-upload="false"
    :limit="5">
    <el-button size="small" type="primary">选择文件</el-button>
    <div slot="tip" class="el-upload__tip">一次只能上传5个文件</div>
  </el-upload>
</el-form-item>
<el-form-item>
  <el-row>
    <el-col :span="24" align="center">
      <el-button type="primary" @click="handlePush"  style="margin-top: 20px">点击上传    
  </el-button>
    </el-col>
  </el-row>
</el-form-item>
</el-form>

data添加参数：

//任务列表
taskOptions : [],
form: {
  taskId: undefined,
},
//上传文件数组
files:[],

method方法：

handleUpload(raw){
  this.files.push(raw.file);
},
async handlePush(){
    this.$refs.upload.submit() // 这里是执行文件上传的函数，其实也就是获取我们要上传的文件
    let fd = new FormData();
    fd.append('taskId',this.taskId)
    this.files.forEach(function (file) {
      fd.append('filename', file, file.name); // 因为要上传多个文件，所以需要遍历一下才行
    })
    
    //请求后台方法
    addCollectionDataList(fd).then(res=>{
      //请求后台成功返回处理
    })
  },
// 选择上传文件校验，
handleChangeFile(file, fileList, name) {
  let index = fileList.findIndex( fileItem => {
    return fileItem.uid === file.uid
  });
//上传文件后缀
  let extension = file.name.split(".")[1];
  if(true){  //判断条件根据自己业务    
    fileList.splice(index, 1); // 从上传文件列表删除当前选中文件
    return false;  
  }
},

java后台代码

@PostMapping("/fileUpload")
public Result fileUpload(@RequestParam("filename") MultipartFile[] files, @RequestParam("taskId")Integer taskId, HttpServletRequest request){
  //文件储存目录
  String realPath = "" ; 
  File path = new File(realPath); 
  if(!path.exists()){
   path.mkdirs(); 
  } 
  //判断file数组不能为空并且长度大于0 
  if(files != null && files.length > 0){ 
    //循环获取file数组中得文件 
    for(int i = 0;i < files.length;i++){ 
    MultipartFile file = files[i]; 
    //保存文件
    if (!file.isEmpty()){
       ..........  //执行文件保存
    }
  }
}