Vue上传多个文件

首先现在form表单中定义上传组件，

<el-form-item  prop="files">
            <el-upload
            class="upload-demo"
            action="#"
            :auto-upload="false"
            :on-change="uploadFiles"
            :multiple="true"
            :file-list="fileList"
            >
            <div v-for="filename in fileList">{{filename}}</div>
            <el-button size="mini" type="primary" icon="el-icon-upload2"
                >{{ $t('lang.information.UDF')}}
            </el-button>
            </el-upload>
        </el-form-item>

data里面定义一下

?

1	fileList:[],

methods里面

//上传多分文件
            uploadFiles (item,fileList) {
              this.form.files = fileList
              
            },

这里我们想要提交表单的时候把文件和表单对象一起提交给后端，所以我们使用formData

let formData = new FormData()   
                      formData.append("address",this.form.address)
                      console.log("多文件上传",this.form.files)
                      this.form.files.forEach(file => formData.append('files', file.raw))

这里注意一下，我们多文件上传时的fileList不是我们file数组，而是fileList数组里面的每一项的raw才是对应的file。

后端controller去接收

public AjaxResult edit(PortalData portalData, @RequestParam(value = "files", required = false) MultipartFile[] files) throws Exception {

}