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进去的数据。特别注意的是如果后台是PHP，则需要在filename后面加[];JAVA则不需要[]
}
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)=>{ })
完毕！！！
尤其需要注意多图上传的写法。
