Ant Design Vue 开发时 upload 自定义手动上传 Axios(ajax)时 new FormData() 出现 [object Object]

技术知识 2019-12-25 10:56:37 阅读 4124 次
> 在使用Ant Design Vue 开发时会用到内置的upload,但是在用到内置的upload的时候,由于官网的说明文档比较简洁,总是出现这样那样的问题! ## 一、手动上传官方样例: ```vue <template> <div class="clearfix"> <a-upload :fileList="fileList" :remove="handleRemove" :beforeUpload="beforeUpload"> <a-button> <a-icon type="upload" /> Select File </a-button> </a-upload> <a-button type="primary" @click="handleUpload" :disabled="fileList.length === 0" :loading="uploading" style="margin-top: 16px" > {{uploading ? 'Uploading' : 'Start Upload' }} </a-button> </div> </template> <script> import reqwest from 'reqwest'; export default { data() { return { fileList: [], uploading: false, }; }, methods: { handleRemove(file) { const index = this.fileList.indexOf(file); const newFileList = this.fileList.slice(); newFileList.splice(index, 1); this.fileList = newFileList; }, beforeUpload(file) { this.fileList = [...this.fileList, file]; return false; }, handleUpload() { const { fileList } = this; const formData = new FormData(); fileList.forEach(file => { formData.append('files[]', file); }); this.uploading = true; // You can use any AJAX library you like reqwest({ url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76', method: 'post', processData: false, data: formData, success: () => { this.fileList = []; this.uploading = false; this.$message.success('upload successfully.'); }, error: () => { this.uploading = false; this.$message.error('upload failed.'); }, }); }, }, }; </script> ``` >**按照官网给的样例是么有问题的!!!** ## 二、完全控制的上传列表官方样例: ```vue <template> <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :multiple="true" :fileList="fileList" @change="handleChange" > <a-button> <a-icon type="upload" /> Upload </a-button> </a-upload> </template> <script> export default { data() { return { fileList: [ { uid: '-1', name: 'xxx.png', status: 'done', url: 'http://www.baidu.com/xxx.png', }, ], }; }, methods: { handleChange(info) { let fileList = [...info.fileList]; // 1. Limit the number of uploaded files // Only to show two recent uploaded files, and old ones will be replaced by the new fileList = fileList.slice(-2); // 2. read from response and show file link fileList = fileList.map(file => { if (file.response) { // Component will show file.url as link file.url = file.response.url; } return file; }); this.fileList = fileList; }, }, }; </script> ``` > 此样例的的功能是,可以通过change事件控制上传文件的类型、大小、数量等等做限制,**按照这个样例也是没有问题!!!** ## 三、但是,我们把这两个结合就会出现问题了: - 1、错误演示代码: ```vue <template> <div class="clearfix"> <a-upload :fileList="fileList" :remove="handleRemove" :beforeUpload="beforeUpload" @change="handleChange"> <a-button> <a-icon type="upload" /> Select File </a-button> </a-upload> <a-button type="primary" @click="handleUpload" :disabled="fileList.length === 0" :loading="uploading" style="margin-top: 16px" > {{uploading ? 'Uploading' : 'Start Upload' }} </a-button> </div> </template> <script> import reqwest from 'reqwest'; export default { data() { return { fileList: [], uploading: false, }; }, methods: { handleRemove(file) { const index = this.fileList.indexOf(file); const newFileList = this.fileList.slice(); newFileList.splice(index, 1); this.fileList = newFileList; }, beforeUpload(file) { this.fileList = [...this.fileList, file]; return false; }, handleChange(info) { let fileList = [...info.fileList]; // 1. Limit the number of uploaded files // Only to show two recent uploaded files, and old ones will be replaced by the new fileList = fileList.slice(-2); // 2. read from response and show file link fileList = fileList.map(file => { if (file.response) { // Component will show file.url as link file.url = file.response.url; } return file; }); this.fileList = fileList; }, handleUpload() { const { fileList } = this; const formData = new FormData(); fileList.forEach(file => { formData.append('files[]', file); }); this.uploading = true; // You can use any AJAX library you like reqwest({ url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76', method: 'post', processData: false, data: formData, success: () => { this.fileList = []; this.uploading = false; this.$message.success('upload successfully.'); }, error: () => { this.uploading = false; this.$message.error('upload failed.'); }, }); }, }, }; </script> ``` - 2、正确演示代码: ```vue <template> <div class="clearfix"> <a-upload :fileList="fileList" :remove="handleRemove" :beforeUpload="beforeUpload" @change="handleChange"> <a-button> <a-icon type="upload" /> Select File </a-button> </a-upload> <a-button type="primary" @click="handleUpload" :disabled="fileList.length === 0" :loading="uploading" style="margin-top: 16px" > {{uploading ? 'Uploading' : 'Start Upload' }} </a-button> </div> </template> <script> import reqwest from 'reqwest'; export default { data() { return { fileList: [], uploading: false, }; }, methods: { handleRemove(file) { const index = this.fileList.indexOf(file); const newFileList = this.fileList.slice(); newFileList.splice(index, 1); this.fileList = newFileList; }, beforeUpload(file) { this.fileList = [...this.fileList, file]; return false; }, handleChange(info) { let fileList = [...info.fileList]; // 1. Limit the number of uploaded files // Only to show two recent uploaded files, and old ones will be replaced by the new fileList = fileList.slice(-2); // 2. read from response and show file link fileList = fileList.map(file => { if (file.response) { // Component will show file.url as link file.url = file.response.url; } return file; }); this.fileList = fileList; }, handleUpload() { const { fileList } = this; const formData = new FormData(); fileList.forEach(file => { formData.append('files[]', file.orignFileObj); }); this.uploading = true; // You can use any AJAX library you like reqwest({ url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76', method: 'post', processData: false, data: formData, success: () => { this.fileList = []; this.uploading = false; this.$message.success('upload successfully.'); }, error: () => { this.uploading = false; this.$message.error('upload failed.'); }, }); }, }, }; </script> ``` - 3、对比以上两块代码你会发现问题在 handleUpload() 下的这个地方: 官网单独的手动上传样例: ``` fileList.forEach(file => { formData.append('files[]', file); }); ``` 改动后的代码: ``` fileList.forEach(file => { formData.append('files[]', file.orignFileObj); }); ``` > 为什么把`file`改成`file.orignFileObj`呢? - 因为:你可以 打印下file 看下内容: 1、没有添加 change 的 handleChange() 时 file 的内容是: ``` file: File(118) { lastModified: 1577163396357, lastModifiedDate:"Tue Dec 24 2019 12:56:36 GMT+0800 (中国标准时间)", name:"xxx.xlsx", size:118, type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", uid:"vc-upload-1577245939870-2", webkitRelativePath:"" } ``` 2、添加了 change 的 handleChange() 时 file 的内容是: ``` file: { lastModified:1577163396357, lastModifiedDate:"Tue Dec 24 2019 12:56:36 GMT+0800 (中国标准时间)", name:"xxx.xlsx", originFileObj:File(118) { lastModified: 1577163396357, lastModifiedDate:"Tue Dec 24 2019 12:56:36 GMT+0800 (中国标准时间)", name:"xxx.xlsx", size:118, type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", uid:"vc-upload-1577245939870-2", webkitRelativePath:"" }, percent:0, size:118, type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", uid:"vc-upload-1577245939870-2" } ``` - 所以如果你把两个样例组合还按照原有的不变,传`file`,那他传的就是"object Object",不是文件了,所以改成`file.orignFileObj`就可以了。 ## 总结: >由此可以确定:如果自己自定义 `new FormData()` 然后 `ajax`上传文件,传文件的`orignFileObj`
Top