鍍金池/ 問答/HTML/ js怎么將 base64轉(zhuǎn)換成圖片？

js怎么將 base64轉(zhuǎn)換成圖片？

js怎么將 base64轉(zhuǎn)換成圖片？
原因是后臺(tái)不支持上傳 base64的圖片，只能在前端解決轉(zhuǎn)換問題。
圖片描述

解決問題：

  //獲取數(shù)組最后一個(gè)元素
  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的頭，并轉(zhuǎn)化為byte
    let bytes = window.atob(arr[1]);
    // 處理異常,將ascii碼小于0的轉(zhuǎn)換為大于0
    let ab = new ArrayBuffer(bytes.length);
    // 生成視圖（直接針對(duì)內(nèi)存）：8位無符號(hào)整數(shù)，長(zhǎng)度1個(gè)字節(jié)
    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()
  // 沒給好一個(gè)值 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)
    }
  });
回答
編輯回答
墨小羽

你需要上傳給后端的應(yīng)該是個(gè)bolb對(duì)象吧，看樣子就是你截圖里的那個(gè)file對(duì)象了，直接把這個(gè)對(duì)象上傳就行了

2017年1月26日 00:36
編輯回答
淺淺

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

var image_64 = 'data:image/png;base64,xxxxxxxxxxxxxxxxx';
var image = atob(image_64.replace('data:image/png;base64,',''));
2017年12月23日 23:51
編輯回答
心夠野

后臺(tái)沒事找事，base64 的字符串轉(zhuǎn)代碼后臺(tái)就是幾行代碼的事，故意不給轉(zhuǎn)吧

2017年9月7日 23:28
編輯回答
伴謊

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

  return new Blob([ab], {
          type: mime
        });
2018年4月30日 23:07
編輯回答
拼未來

直接上傳那個(gè)file文件給后臺(tái)，后臺(tái)他會(huì)處理的，我們就是這樣做的

2017年1月26日 06:12
編輯回答
殘淚

需求描述的挺模糊的，因?yàn)閎ase64本身就可以作為圖片src顯示的。。。
是不是這樣一個(gè)需求: 需要前端將base64轉(zhuǎn)換為可以上傳的file對(duì)象，然后放在ajax的表單中上傳?
如果這樣的話，看代碼。

    function base64ToBlob(urlData) {
        var arr = urlData.split(',');
        var mime = arr[0].match(/:(.*?);/)[1] || 'image/png';
        // 去掉url的頭，并轉(zhuǎn)化為byte
        var bytes = window.atob(arr[1]);
        // 處理異常,將ascii碼小于0的轉(zhuǎn)換為大于0
        var ab = new ArrayBuffer(bytes.length);
        // 生成視圖（直接針對(duì)內(nèi)存）：8位無符號(hào)整數(shù)，長(zhǎng)度1個(gè)字節(jié)
        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轉(zhuǎn)好的blob，也可以直接用fileinput中獲取的文件對(duì)象，效果一樣
          file: b64ToBlob(imgData),
        }],
        ...
    });

注意，上述upload可以是你自己的上傳方法（庫很多，譬如webupload，當(dāng)然自己封裝一個(gè)也很簡(jiǎn)單），原理如下：

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);
    }
}
...

省略了若干代碼。

總而言之，第一段代碼就可以符合這個(gè)需求了（個(gè)人理解下來的需求）。

2017年8月21日 15:57