简介

H5中使用vant的uploader组件选择的图片，一次选择一张返回的是对象，一次选择多张返回的数组（包含一个个对象），但是这些对象都是base64的格式，不是想要的文件格式，于是需要我们转换。

具体实现

// HTML <van-uploader :multiple="true" :max-count="countIndex" upload-text="上传文件" :after-read="afterRead" ></van-uploader>// JSimport {Uploader, Toast } from "vant";import Vue from "vue";Vue.use(Uploader);export default {data() {return: {imageData: [], // 准备保存的图片列表countIndex: 9 // 可选图片剩余的数量}},method: {// 回调：组件选择图片成功后的回调函数afterRead(file, detail) {// 此时可以自行将文件上传至服务器// 1.先判断是否是单个对象// 2.否则就是数组，需要遍历进行转换，再上传（当然，如果你们接口支持同时传多个到服务器，就需要对后面的逻辑进行修改）if (!Array.isArray(file)) {this.uploadImgFun(file.content);} else {for (let i = 0; i < file.length; i++) {if ((this.imageData.length + i) >= this.countIndex) {Toast("最多上传9张图片");break;} else {this.uploadImgFun(file[i].content);}}}},uploadImgFun(content) {// 再做一次最大张数图片的判断，避免异步偷跑if (this.imageData.length >= 9) {Toast("最多上传9张图片");return;}// 创建表单数据格式，以表单的数据传递，对该表单进行添加参数let formData = new FormData();// formData.append("参数名1", "参数值1");// formData.append("参数名2", "参数值2");// formData.append("参数名3", "参数值3");formData.append("file", this.dataURLtoFileFun(content, "file.jpg"));// 注意需要在调用接口的时候修改请求头为"multipart/form-data"，以表单的格式上传this.$_http.post(this.$_API.TMC_POST_UPLOAD_FILE, formData, {headers: {"Content-Type": "multipart/form-data"}}).then(res => {// 上传到服务器成功的操作...});},// bae64转文件对象dataURLtoFileFun (dataurl, filename) {// 将base64转换为文件，dataurl为base64字符串，filename为文件名（必须带后缀名，如.jpg,.png）let arr = dataurl.split(",");let mime = arr[0].match(/:(.*?);/)[1];let bstr = atob(arr[1]);let n = bstr.length;let u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], filename, {type: mime });}}}

最后

觉得有用的朋友请用你的金手指点一下赞，或者评论留言一起探讨技术！