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`