ant+vue+springboot 上传文件时接收不到文件

Question

 <a-upload
                                name="file"
                                listType="picture-card"
                                :fileList="fileList"
                                :multiple="true"
                                @preview="handlePreview"
                                :beforeUpload="beforeUpload"
                                @change="handleChange"
                        >
                            <div v-if="fileList.length < 1">
                                <a-icon type="plus" />
                                <div class="ant-upload-text">Upload</div>
                            </div>
                        </a-upload>

js代码如下

var formData = new FormData()

                formData.append('file', this.fileList[0]);
                formData.append('userid', '1');
                formData.append('systemid', '886');
                this.axios(
                    {
                        method: 'post',
                        url: 'http://localhost:8086/rest/uploadFileByMulti',
                        processData: false,
                        data: formData
                    })
                    .then((response) => {
                        alert(JSON.stringify(response))
                    })
                    .catch(function (error) {
                        console.log(error)
                    })

后台接受代码如下

 @RequestMapping("/uploadFileByMulti")
    @ResponseBody
    public AjaxResult uploadFileList(@RequestParam("file") 
        MultipartFile file String userid, String systemid) {
......
}

上传时一直报file为空

Answer 1

找到问题了，vue的filelist是base64格式的 ，需要转为file格式就可以了
self.imageUrl = file.url || file.thumbUrl
form.append('image', self.dataURLtoFile(self.imageUrl,file.name))

dataURLtoFile(dataurl, filename) {//将base64转换为文件
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
},