vue element-ui 批量上传的坑点

最新推荐文章于 2024-03-18 16:39:24 发布

转载最新推荐文章于 2024-03-18 16:39:24 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5d091f3c5188253cfa3ac366

文章标签：

#javascript #ui #后端 #ViewUI

通过查看上传的源码，解决了结构灵感方面的问题。该内容转载自https://juejin.im/post/5d091f3c5188253cfa3ac366 。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最开始一直以为是自己后端的多文件接受写法久多不接触写错了，
但对照前端多个文件也没有数据传过来

而最开始就成功的但文件上传:before-upload="beforeUpload" 上传是ok的
最后看请求 表单提交前upload 的file本身就是raw也就是blob结构，但这有个不符合我这边要求的问题就是
这样的上传是每个文件提交一次，我这里希望的是一次多个文件提交，同时element这里提交后就会把展示的
待上传文件消失掉，用手动上传更符合本意，

因此用改变事件处理，可能修改或什么操作套路呢 
复制代码

        beforeUpload(file){
        let fd = new FormData()
        fd.append('files', file, file.name);
        this.uploadFileRequest(`/accessory/add`, fd).then(resp => {

        }).catch(e=>{

        });
        return false
      },
      
      handleChange(file, fileList) {
        this.waitToUpFiles.push(file)
      },
      
      upFiles(){
        return new Promise((resolve,reject)=>{
          let fd = new FormData()
          let files = this.waitToUpFiles
          for(let i=0;i<files.length;i++){
            let file = files[i]
            fd.append('files', file.raw, file.name);
          }
          
          this.uploadFileRequest(`/accessory/add`, fd).then(resp => {
            resolve(resp)
          }).catch(e=>{
            reject()
          });
        })
      },
      
    //后端
    @ApiOperation(value="上传附件", notes="可以上传单个多个附件", httpMethod = "POST")
    @ApiResponses({
    	@ApiResponse(code = 200, message = "请求完成")
    })
    @PostMapping(value = "/add")
	public BaseResponse insert(@RequestParam(value="files", required=true) MultipartFile[] files) {
		BaseResponse result = accessoryService.handleUp(files);
		return result;
	}
复制代码