js怎么将 base64转换成图片？

Question

js怎么将 base64转换成图片？
原因是后台不支持上传 base64的图片，只能在前端解决转换问题。

解决问题：

  //获取数组最后一个元素
  let hasFiles = files[Object.keys(files).pop()] // 参考上面的图片
  let file = hasFiles.url
  let name = hasFiles.file.name
  let type = hasFiles.file.type

  function base64ToBlob(urlData, type) {
    let arr = urlData.split(',');
    let mime = arr[0].match(/:(.*?);/)[1] || type;
    // 去掉url的头，并转化为byte
    let bytes = window.atob(arr[1]);
    // 处理异常,将ascii码小于0的转换为大于0
    let ab = new ArrayBuffer(bytes.length);
    // 生成视图（直接针对内存）：8位无符号整数，长度1个字节
    let ia = new Uint8Array(ab);
    for (let i = 0; i < bytes.length; i++) {
      ia[i] = bytes.charCodeAt(i);
    }
    return new Blob([ab], {
      type: mime
    });
  }

  if (hasFiles.file.size > 1024 * 1024 * 10) {
    throw '文件超过10M'
  }
  let conversions = base64ToBlob(file, type)
  let param = new FormData()
  // 没给好一个值 param.append('file', file, name) 改为param.append('file', conversions, name)
  param.append('file', conversions, name)
  param.append('chunk', '0')
  axios.post(config.api.upload, param).then(function (res) {
    if (res.status === 200) {
      //后端判断文件大小
      if (res.data && res.data.state === 'ERROR') {
        throw res.data && res.data.msg;
      }
      console.log(res)
    }
  });

Answer 1

需求描述的挺模糊的，因为base64本身就可以作为图片src显示的。。。
是不是这样一个需求: 需要前端将base64转换为可以上传的file对象，然后放在ajax的表单中上传?
如果这样的话，看代码。

    function 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
        });
    }
    
    // 使用方式
    upload({
        url: 'xxx',
        files: [{
          name: 'name1',
          // 值可以用base64转好的blob，也可以直接用fileinput中获取的文件对象，效果一样
          file: b64ToBlob(imgData),
        }],
        ...
    });
    

注意，上述upload可以是你自己的上传方法（库很多，譬如webupload，当然自己封装一个也很简单），原理如下：

var formdata = new FormData();

var files = settings.files;

if (files) {
    if (Array.isArray(files)) {
        for (var i = 0,
        len = files.length; i < len; i++) {
            formdata.append(files[i].name, files[i].file);
        }
    } else {
        formdata.append(files.name, files.file);
    }
}
...

省略了若干代码。

总而言之，第一段代码就可以符合这个需求了（个人理解下来的需求）。

Answer 2

去掉data:image/png;base64,，然后base64解码

var image_64 = 'data:image/png;base64,xxxxxxxxxxxxxxxxx';
var image = atob(image_64.replace('data:image/png;base64,',''));

Answer 3

你需要上传给后端的应该是个bolb对象吧，看样子就是你截图里的那个file对象了，直接把这个对象上传就行了

Answer 4

直接上传那个file文件给后台，后台他会处理的，我们就是这样做的

Answer 5

后台没事找事，base64 的字符串转代码后台就是几行代码的事，故意不给转吧

Answer 6

微信小程序到这一步走不通了

  return new Blob([ab], {
          type: mime
        });