vue3 element-plus 一次上传多个文件

element-plus原先的 el-upload组件只能一个一个的上传文件,现在有一个需求是选择多张文件,一次上传多张,就需要自己来实现

html代码

 
 上传素材

js 代码

const upload = ref(null);
const selectFiles = function () {
  console.log(upload.value.files);
  upload.value.value = "";//每次点击清空上次选择的文件
  upload.value.click();
}
const uploadFile = function (e) {
    //e.target.files也可以获取到文件列表
  console.log(upload.value.files)
  let files = upload.value.files;
  var form = new FormData();
  for (var i = 0; i < files.length; i++) {
    form.append("files", files[i]);
  }
  form.append("name", head_scene_name);
    //axios 上传,headers需要设置headers: {
   //     'Accept': 'Application/json',
   //     'X-Requested-With': 'XMLHttpRequest',
   //     'Content-Type': 'multipart/form-data'
    //  }
}

java代码

@PostMapping({"/uploadfiles"})
    public RestResult uploadFiles(@RequestParam("files") MultipartFile[] files, @RequestParam("name") String name) {
        
    }

你可能感兴趣的:(web前端,js,vue.js,前端,javascript)