vue上传文件formData上传的解决全流程

const handleUpload = (e) => { const service = axios.create({ baseURL: ‘/api', withCredentials: true // cors跨域要让后台设置cors跨域需后台设配合 }) const params = new FormData() // 声明formData数据类型 params.append(‘file', event.target.files[0]) params.append(‘tp', ‘partImg') service .post(‘UploadFiles/UploadImg', params, { headers: { ‘Content-Type': ‘multipart/form-data'// 修改请求头 } }) .then(res => { // console.log(‘提交成功'); }) }

//前端使用的UI组件是Ant Design of Vue的upload组件 

handleUpload() {       const { fileList } = this       if (fileList.length > 0) {         var notUploaded = []         var uploaded = []         fileList.forEach((item) => {           if (item.status && item.status === 'done') {             uploaded.push(item.url)           } else {             notUploaded.push(item)           }         })         let formData = new FormData()         notUploaded.forEach((file, index) => {           //所有文件保存在formData中           formData.append(`file${index}`, file.originFileObj)         })         console.log('formData', JSON.stringify(formData))         //请求批量上传接口         batchUploadFile(formData, this.targetS).then((res) => {           if (res.success) {             console.log('res', JSON.stringify(res))           } else {             this.$message.error('图片上传失败，请重新上传')           }         })         // return         //this.$emit('loadImgUrl', this.loadImgUrl.join(','))         //this.fileList = []       } else {         // 如果没有图片则返回空         //this.$emit('loadImgUrl', '')         //this.fileList = []       }     },

    @ApiOperation(value = "批量文件上传（最多同时上传5个文件）", notes = "批量文件上传")     @PostMapping("/batchUploadFile/{filePath}")     public Result batchUploadFile(@ApiParam(value = "自定义上传文件的路径")                                      @PathVariable("filePath") String filePath,                                      HttpServletRequest request) throws Exception {         MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;         Map fileMap = multipartRequest.getFileMap();         if (fileMap.isEmpty()) {             return Result.error("上传文件不能为空");         }         if (fileMap.size() > 5) {             return Result.error("批量上传文件数量不能超过5个文件");         }         List> mapList = ftpUtils.batchUploadFile(fileMap, filePath);         return Result.OK(mapList);     }

let formData = new FormData()         notUploaded.forEach((file, index) => {           //所有文件保存在formData中           formData.append(`file${index}`, file.originFileObj) //核心代码         })

MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;         Map fileMap = multipartRequest.getFileMap();