简介
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 });}}}
最后
觉得有用的朋友请用你的金手指点一下赞,或者评论留言一起探讨技术!