H5利用formData來上傳文件（包括圖片，doc,pdf等各種格式）方法小結！

H5頁面中我們常需要進行文件上傳，那么怎么來實現這個功能呢？？？ 我主要談如下兩種方法。

(一)、傳統的form表單方法

 <form action="/Home/SaveFile1" method="post" enctype="multipart/form-data">
        <input type="file" class="file1" name="file1" multiple id="file" />
        <button type="submit" class="but1">上傳</button>
</form>

 <script>
        document.getElementById("file").onchange = function () {
            let filesContent = document.getElementById("file").files;
            console.log(filesContent);
        }
 </script>

這個目前大概了解一下就ok了，反正就需要form 標簽，需要配置 method="post" enctype="multipart/form-data"   需要給input 加name= ""  屬性。

這個方法相對比較落后了，目前不推薦這么操作，請看第二種方法。

（二）、利用FormData來實現相關的功能

1、html部分按照如下寫法（vue寫法）即可，當然，樣式問題可以根據自己的想法把上傳上去的文件樣式進行優化。發現沒有，這里不需要寫name屬性，因為后續的new formData 里面的鍵就代表name

 <input
          type="file"
          class="upload"
          @change="addImg"  // 監聽input的改變，改變即可獲取上傳的文件內容。
          ref="inputer"  
          accept="image/*" //  代表限制上傳的格式，這里表示限制為圖片，其他格式參照網上其他說明
          multiple   //  代表可以上傳多個文件，去掉則不可一下子多圖上傳
  />

展示上傳文件的大概html格式

 <div class="uploadBox" v-for="(value, key) in imgs" :key="key">
              <img :src="getObjectURL(value)" alt class="uploadImg" />
              <img src="../../assets/images/close.png" alt class="closeImg" @click="delImg(key)" />
   </div>

 

2、js 部分如下：

data() {
    return {
      formData: new FormData(),
      imgs: {},   這個是用來保存所有的上傳內容，對象格式，鍵值對格式
      imgLen: 0,
    };
  },

 

addImg() {  // 監聽了input的改變
      let that = this;
      let inputDOM = this.$refs.inputer;    // 獲取input的dom元素
      this.fil = inputDOM.files; // 獲取dom元素對應的files內容，注意files的內容為js對象格式，即key,value，我們真正需要的文件內容為value.

for (let i = 0; i < this.fil.length; i++) {   //遍歷files 然后判斷上傳的每個文件大小，如果不符合要求則返回
        let size = Math.floor(this.fil[i].size / 1024);
        if (size > 5 * 1024 * 1024) {
          that.$toast({
            message: "請輸入5M以內的文件",
            position: "middle",
            duration: 1500
          });
          return false;
        }
        this.imgLen++;
        this.$set(  // 對於符合要求的文件則push進imgs對象中，這里給文件對象的key通過時間戳進行改名，當然這里不改也可以。
          this.imgs,
          this.fil[i].name + "?" + new Date().getTime() + i,
          this.fil[i]
        ); // 至此我們就把累積的上傳的文件都放在了imgs對象中，相當於我們不直接用files對象，而是經過自己處理，得出的一個新的imgs對象。
　　　　　　
      }
    },
    delImg(key) {  //  這個是用來把展示的文件進一步刪除后的操作。
      this.$delete(this.imgs, key);
      this.imgLen--;
    },
    getObjectURL(file) {
      var url = null;
      if (window.createObjectURL != undefined) {
        url = window.createObjectURL(file);
      } else if (window.URL != undefined) {
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        url = window.webkitURL.createObjectURL(file);
      }
      return url;
    },

傳完畢文件並展示出來后，那么我們就需要進行正式上傳了，如下便是js真正提交的方法。

ajax方法上傳一張圖片及多張圖片的方法：

 submit() {
       let that = this;
　　　　
　　　　// 單張圖的方法
　　　　for (let key in this.imgs) { //即使上傳一張圖片也得進行循環，要么無法拿到value的值。
           this.formData.append('filename', this.imgs[key]);   // 注意這里的filename 和input 直接寫name = "filename" 是等價的！！！也就是這個名字需要和后台進行約定！！！ 
       }
　　　　
      // 多張圖的方法

　　　　　for (let key in this.imgs) {

　　　　　　　　this.formData.append(' filename[]', this.imgs[key]);    //這里代表上傳多張圖片的時候，相當於最后filename是一個數組了，而且filename是一個push進去的數據。

　　　　  }

this.formData.append('id', that.id);  // formdata不僅可以傳文件，也可以順便傳點普通的值！！！下同 this.formData.append('uid', that.uid);
       this.formData.append('content', that.desc);
       mui.showLoading("圖片上傳中..","div");
       $.ajax({
                        url: api_url + '/api2_1/TaskApply/tkAdd2',
                        type: 'POST',
                        cache: false, //上傳文件不需要緩存
                        data: this.formData,
                        processData: false, // 告訴jQuery不要去處理發送的數據
                        contentType: false, // 告訴jQuery不要去設置Content-Type請求頭
                        success: function (res) {
                            console.log(res)
                            if (res.code == 200) {
                                mui.hideLoading();
                                window.location.href = "index.html";
                            } else if (res.code == 401) {
                                mui.toast("圖片不能為空", {
                                    duration: 'short',
                                    type: 'div'
                                });
                            }
                        },
                        error: function (data) {
                            console.log(data)
                        }
                    })
 },

 axios 上傳圖片的方法

 let config = {
          headers: { "Content-Type": "multipart/form-data" }
 };
 console.log(that.imgs);
 for (let key in that.imgs) {
       that.formData.append("filename[]", that.imgs[key]);
   }
 that.$post("/Recruit/uploadfile", that.formData, config).then((res)=>{
        
})

完畢！！！

尤其需要注意多圖上傳的寫法。