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)=>{
        
})

完毕！！！

尤其需要注意多图上传的写法。