H5：如何将vant-uploader上传的base64图片转换为文件上传到服务器

简介

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

具体实现

// HTML 
<van-uploader :multiple="true" :max-count="countIndex" upload-text="上传文件" :after-read="afterRead" ></van-uploader>

// JS
import {
      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 });
    }
  }
}

最后

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