Element Upload上传组件调接口时踩坑（FormData传参）

本文的倔金传送门 --->掘金

使用自定义Upload上传实现

参数：http-request 意为“覆盖默认的上传行为，可以自定义上传的实现”是个function。

使用Upload组件

因为饿了么提供的几种上传交互都不满足我们的业务，所以我需要自定义交互。先看一下代码里是怎样的。

// main.js里引入并使用
import { Upload } from 'element-ui';
Vue.use(Upload);
复制代码

// xxx.vue
  <template>
    <el-upload
      action="string"           // action是必填项，随便填个内容
      :http-request="uploadImg" // 使用自定义上传实现
      :show-file-list="false"   // 不显示已上传文件列表
      >
    </el-upload>
  </template>
复制代码

下面先显示错误的版本

  // xxx.vue 以下只显示了调接口的指定方法
  <script>
     methods: {
      uploadImg(item) {
        Api.uploadFile({
          data: {
            file: item.file,
            group: 'system'
          }
        })
        .then((data) => {
          console.log(data)
        })
        .catch((err) => {
          console.log(err, 'error');
        });
      },
    }
  </script>  
复制代码

uploadFile这个上传接口需要传两个参数（file, group）,这里我一开始使用的是对象的方式传参，嗯，没错，调不通...

正确的传file的方式如下

// xxx.vue
<script>
     methods: {
      uploadImg(item) {
        let formData = new FormData()
        formData.append('file', item.file)
        formData.append('group', 'system')
        
        Api.uploadFile({
          data: formData  // 选择FormData方式传参
        })
        .then((data) => {
          console.log(data)
        })
        .catch((err) => {
          console.log(err, 'error');
        });
      },
    }
  </script>
复制代码

在尝试了很多方法，查阅了很多文档之后，发现了一个神奇的东东，怪我知识浅薄竟不知道FormData的使用。吓得我赶紧拿小本本记下了它的使用方法和功能。对，这里正是使用了FormData的将file类型转换为二进制的方法传参。 点击查看FormData 对象的使用

关于FormData的使用

FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。

从零开始创建FormData对象

var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456); //数字123456会被立即转换成字符串 "123456"

// HTML 文件类型input，由用户选择
formData.append("userfile", fileInputElement.files[0]);

// JavaScript file-like 对象
var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...
var blob = new Blob([content], { type: "text/xml"});

formData.append("webmasterfile", blob);

var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);
复制代码

划重点了！！！我这个坑就是因为利用了将file转换为二进制。

FormData 对象的字段类型可以是 Blob, File, 或者 string: 如果它的字段类型不是Blob也不是File，则会被转换成字符串类。

通过HTML表单创建FormData对象

示例:

var formElement = document.querySelector("form");
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
request.send(new FormData(formElement));
复制代码

你还可以在创建一个包含Form表单数据的FormData对象之后和发送请求之前，附加额外的数据到FormData对象里，像这样：

var formElement = document.querySelector("form");
var formData = new FormData(formElement);
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
formData.append("serialnumber", serialNumber++);
request.send(formData);
复制代码

这样你就可以在发送请求之前自由地附加不一定是用户编辑的字段到表单数据里

使用FormData对象上传文件

使用FormData上传文件的时候需要在表单中添加一个文件类型的input：

var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {

  var oOutput = document.querySelector("div"),
      oData = new FormData(form);

  oData.append("CustomField", "This is some extra data");

  var oReq = new XMLHttpRequest();
  oReq.open("POST", "stash.php", true);
  oReq.onload = function(oEvent) {
    if (oReq.status == 200) {
      oOutput.innerHTML = "Uploaded!";
    } else {
      oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br \/>";
    }
  };

  oReq.send(oData);
  ev.preventDefault();
}, false);
复制代码

如果FormData对象是通过表单创建的，则表单中指定的请求方式会被应用到方法open()中 。

. . . 更多更细的内容建议看我的参考文档 FormData 对象的使用

new FormData() - FormData对象的作用及用法

emmmmm 写这篇文章是因为解决这个问题花了很长时间，就记录一下日常学习的心得。有不对的地方，望各位及时指出哈，谢谢~