Ant Design Vue 开发时 upload 自定义手动上传 Axios（ajax）时 new FormData() 出现 [object Object]-博客-网页小功能

Ant Design Vue 开发时 upload 自定义手动上传 Axios（ajax）时 new FormData() 出现 [object Object]: 原创前端  2019-12-25 10:56:37  浏览：4410

>在试用Ant Design Vue 开发时会用到内置的upload,但是在用到内置的upload的时候，由于官网的说明文档比较简洁，总是出现这样那样的问题！

### 一、手动上传官方样例：
```
<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;

### 二、完全控制的上传列表官方样例：
```
<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、错误演示代码：
```
<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);

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、正确演示代码：
```
<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);

this.fileList = fileList;
      },
      handleUpload() {
        const { fileList } = this;
        const formData = new FormData();
        fileList.forEach(file => {
          formData.append('files[]', file.orignFileObj);
        });
        this.uploading = true;

##### 因为：你可以 打印下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`

上一篇：: vue-cli3实现分环境打包，给不同的环境配置相对应的打包命令和变量配置
下一篇：: 没有了