base64转为图片文件上传到服务器

methods:{
    base64ToBlob(urlData) {
      var arr = urlData.split(',');
      var mime = arr[0].match(/:(.*?);/)[1] || 'image/png';
      // 去掉url的头,并转化为byte
      var bytes = window.atob(arr[1]);
      // 处理异常,将ascii码小于0的转换为大于0
      var ab = new ArrayBuffer(bytes.length);
      // 生成视图(直接针对内存):8位无符号整数,长度1个字节
      var ia = new Uint8Array(ab);

      for (var i = 0; i < bytes.length; i++) {
          ia[i] = bytes.charCodeAt(i);
      }

      return new Blob([ab], {
          type: mime
      });
  },
  getImgUrl(){
    let that = this;
    html2canvas(document.querySelector("#exitImg"),opts).then(canvas => {
         console.log(canvas)
         var dataUrl = canvas.toDataURL();
         let fileImg = that.base64ToBlob(dataUrl)
         var fd = new FormData()
         fd.append('file', fileImg,"image.jpg")
         let config = {
             headers: {
                 'Content-Type': 'multipart/form-data'
             }
         }
         axios.post(that.uploadUrl, fd,config).then( res => {
             console.log(res)
         }).catch( res => {
             console.log(res)
         })
     });    
  }
},
mounted:function(){
    this.getImgUrl()
}

你可能感兴趣的:(axios,vue-js,form表单)