FormData上傳文件

將本地數據（.xlsx、.docx等文件）上傳或導入數據庫，有時候需要使用FormData 對象。FormData對象，可以把所有表單元素的name與value組成一個queryString,提交到後臺。
一、創建對象：
創建一個FormData對象實例
1、常用的創建

let formData = new FormData();

2、vue中的創建

let formData = new window.FormData();

3、在表單的基礎上創建

<form id="fromCont" action="" method="post">
    <input type="text" name="content">
    <input type="submit" value="提交">
</form>
//根據id獲取表單
  var form = $("#fromCont");
//初始化實例
var formData = new FormData(form);
// 獲取content內容
var content= formData.get("content"); 
//通過append() 方法向對象中添加content鍵值對
formData.append("content",content);

二、操作方法：
formData裏面存儲的數據形式，一對key/value組成一條數據，key是唯一的，一個key可能對應多個value。如果是使用表單初始化，每一個表單字段對應一條數據，它們的HTML name屬性即爲key值，它們value屬性對應value值。
1、獲取值

//通過get(key)/getAll(key)來獲取對應的value
formData.get("value");  

2、添加數據

//通過append(key, value)來添加數據，如果指定的key不存在則會新增一條數據，如果key存在，則添加到數據的末尾
formData.append("key1", "value1");
formData.append("key2", "value2");
formData.append("key2", "value3");
//獲取key1
formData.get("key1");  //返回 "value1"
formData.get("key2");  //返回 "value2"
formData.getAll("key2");  //返回 ['value2','value3']

3、設置、修改數據

//通過set(key, value)來設置修改數據，如果指定的key不存在則會新增一條，如果存在，則會修改對應的value值。
formData.append("key1", "value1");
formData.set("key1", "value2");
//獲取key1
formData.get("key1");  //返回 "value2"

4、刪除數據

//通過delete(key)，來刪除數據
formData.append("key1", "value1");
formData.delete("k1");
//獲取key1
formData.get("key1");  //返回 []

5、判斷數據的存在

//通過has(key)來判斷是否對應的key值,如果有對應的key值就返回true,如果沒有則返回false
formData.append("key1", "value1");
formData.has("key1"); // true
formData.has("key2"); // false

三、vue上傳文件

  <template>
    </div>
      <div class="fileItem">
        //上傳文件的input，type設置爲file
        <input type="file" ref="fileId" @change="getFile">
      </div>
  </div>
</template>

<script>
export default {
data(){
   return:{
    //賦值input中file內容
    xlsxFile:''
    }
   },
  methods:{
   getFile(){
     //獲取file內容
    let files = this.$refs.fileId.files[0];
     this.xlsxFile = files;
   },
    //上傳文件
    importRow() {
      let that = this;
      if (that.xlsxFile == "") {
        that.$message.error('請先添加文件');
        return;
      }
    // vue 中使用 window.FormData(),否則會報 'FormData isn't definded'
    //創建一個FormData對象，然後通過append() 方法向對象中添加鍵值對
      let formData = new window.FormData(); 
      formData.append("file", that.xlsxFile);
     // that.importUrl 上傳的接口url
      that.$axios.post(
          that.importUrl,
          formData
        ).then(function(response) {
          that.$message.success('上傳成功');
        }) .catch(function(error) {
          that.$message.error(res.data.msg);
        });
}

}
</script>

四、HTML中上傳文件

//HTML中
<div>
<input name="file" type="file" id="fileCont" value="">
</div>
//JS中，這裏引入了Jquery
       $('#fileCont').on('change',function(){
       var fileObj = $(this).files[0]; 
       if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
        //這裏是我自己定義的彈框方法
        popup({type:'tip',bg:false,msg:"請選擇件",delay:1000,clickDomCancel:true});
        return;
         }
        var formFile = new FormData();
         //加入文件對象,向接口傳入兩個參數file,id
        formFile.append("file", fileObj); 
        formFile.append("id", id); 
         var data = formFile；
          $.ajax({
            url:urlCur,
            data: data,
             type: "POST",
             dataType: "json",
             //上傳文件無需緩存
             cache: false,
             //用於對data參數進行序列化處理 這裏必須false
              processData: false,
             //必須
             contentType: false, 
             success: function (res) {
               if(res.code === 200){
              popup({type:'success',bg:false,msg:"上傳成功",delay:1000,clickDomCancel:true});
              }else{
              popup({type:'error',bg:false,msg:res.msg,delay:1000,clickDomCancel:true});
                }
             },
         }) 
  })

上傳文件需要前後端的小夥伴兒配合，一起完成，第一次進行文件上傳時，遇到了一些麻煩，比如前端傳值的方法不對、後臺接口報500，但是隻要有耐心，肯鑽研，就一定會成功的！
路漫漫其修遠兮，吾將上下而求索。

作者：童話_xxv
鏈接：https://www.jianshu.com/p/51188659d778
來源：簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。