压缩图片上传 —— canvas和ajax

bug：之所以使用axios上传图片不成功的原因是，axios在封装的时候，post请求的参数进行了qs.stringfy(data)处理，变成了字符串。
解决方法：使用原生axios上传
import axios from "axios";

1、 图片加载完毕,把图片绘制到canvas上去
2、转换为Bold对象或File对象
3、ajax上传，一定要加name

// ajax上传图片——文件流方式
export function upload(base64, name) {
  return new Promise((resolve, reject) => {
    Toast.loading({
      duration: 0, // 持续展示 toast
      forbidClick: true, // 禁用背景点击
      mask: false // 是否显示遮罩层
      // message: "图片上传中..."
    });
    let img = new Image();
    img.src = base64;
    img.onload = function() {
      //图片加载完毕,把图片绘制到canvas上去
      compressEvent(img, dataURL => {
        uploadImg(dataURL);
        //转换为Bold对象或File对象
        let blob = dataURItoBlob(dataURL);
        console.log(11111111, blob);
		//ajax上传，一定要加name
        let formdata = new FormData();
        formdata.append("file", blob, name);

		axios
          .post(
            `${localStorage.getItem(
              "baseURL"
            )}/api/common/uploadali?token=${token}&sign_id=${localStorage.getItem(
              "sign_id"
            )}&web_type=agent`,
            formdata
          )
          .then(res => {
            Toast.clear();
            resolve(res.data.data);
          })
          .catch(error => {
            Toast.clear();
            error.message === "timeout"
              ? Toast("图片上传超时，请稍后再试")
              : Toast(error.message);
          });
			
        //$.ajax({
        //  type: "post",
        //  url: `${localStorage.getItem(
        //    "baseURL"
        //  )}/api/common/uploadali?token=${localStorage.getItem(
        //    "token" + localStorage.getItem("sign_id")
        //  )}&sign_id=${localStorage.getItem("sign_id")}`,
        //  data: formdata, // formdata直接赋值给data
        //  processData: false, //formdata已将数据序列化，无需在处理
        //  contentType: false, //formdata无需设置请求头
        //  success: function(res) {
        //    console.log(222, res);
        //    Toast.clear();
        //    resolve(res.data);
        //  }
        //});
      });
    };
  });
}
// 把图片绘制到canvas上去
function compressEvent(img, callback) {
  let that = this;
  // let canvas = document.getElementById("myCanvas");
  var canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");
  let initSize = img.src.length;
  let width = img.width;
  let height = img.height;
  canvas.width = width;
  canvas.height = height;
  ctx.drawImage(img, 0, 0, width, height);
  let dataURL = canvas.toDataURL("image/jpeg", 0.4); //选择压缩程度
  callback ? callback(dataURL) : null; //调用回调函数
}
// 将Bold对象转换成formData对象,并提交
function uploadImg(dataURL, name) {}
// dataURL转换为Bold对象或File对象
function dataURItoBlob(dataurl) {
  //dataurl是base64格式
  var arr = dataurl.split(","),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}

   <van-uploader v-model="pay1" :max-count="1" :after-read="afterRead1" />
   
   import { upload } from "../../../common/js/common";
   afterRead1() {
      upload(this.pay1[0].content, this.pay1[0].file.name).then(data => {
        this.img1 = data.url;
        console.log(this.img1);
      });
    },