ElementUi 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對象的做用及用法

emmmm,寫這篇文章是由於解決這個問題花了很長時間，就記錄一下平常學習的心得。有不對的地方，望各位及時指出哈，謝謝~