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

你蠢哭我咯

于 2018-03-15 16:32:17 发布

阅读量6.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： axios vue-js form表单

本文链接：https://blog.youkuaiyun.com/m0_38069630/article/details/79570104

vue-js 同时被 3 个专栏收录

53 篇文章

订阅专栏

axios

6 篇文章

订阅专栏

form表单

4 篇文章

订阅专栏

本文介绍了一种将Base64编码的图片数据转换为Blob对象的方法，并通过FormData发送到服务器。此过程涉及使用JavaScript操作Base64字符串、创建Blob对象以及使用axios进行HTTP请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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()
}