uploadProfile(e) {

    let file = e.target.files[0];
    let reader = new FileReader();

    reader.onloadend = function() {
        console.log('RESULT', reader.result)
    }
    reader.readAsDataURL(file);
}

如果您遇到cors源错误，有一个简单的代理，称为cors-fix，它在服务器上加载图像并将其作为缓冲区数组返回。

因此，我们可以使用fetch来获取图像数据，并使用filereader将其转换为dataUrl，如@HaNdTriX所述。

  function toDataUrl(url) {
    fetch(`https://cors-fix.web.app/v1?url=${url}`)
    .then(data => data.blob().then(blob => {
      const reader = new FileReader();

      reader.onloadend = () =>  {
        console.log(reader.result);
      };

      reader.onerror = () => {
        console.log('reader error');
      };

      reader.readAsDataURL(blob);
    }));
  }

您可以使用FileAPI，但它几乎不受支持。

有多种方法可供选择:

1. 方法:FileReader

通过XMLHttpRequest加载图像为blob，并使用FileReader API (readAsDataURL())将其转换为dataURL:

函数toDataURL(url，回调){ var xhr = new XMLHttpRequest(); xhr。Onload = function() { var reader = new FileReader(); 读者。Onloadend = function() { 回调(reader.result); ｝ reader.readAsDataURL (xhr.response); }; xhr。打开(‘得到’,url); xhr。responseType = 'blob'; xhr.send (); ｝ toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0'，函数(dataUrl) { dataUrl console.log('结果:') })

这个代码示例也可以使用WHATWG获取API来实现:

const toDataURL => .then(response => response.blob()) .then(blob => new Promise((resolve, reject) => { const reader = new FileReader() 读者。Onloadend = () => resolve(reader.result) 读者。Onerror =拒绝 reader.readAsDataURL (blob) })) toDataURL(“https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0”) .then(dataUrl => { dataUrl console.log('结果:') })

这些方法:

有更好的压缩 也适用于其他文件类型

浏览器支持:

http://caniuse.com/#feat=filereader http://caniuse.com/#feat=fetch

2. 方法:Canvas(适用于旧浏览器)

将图像加载到image - object中，将其绘制到未受污染的画布上，并将画布转换回dataURL。

function toDataURL(src, callback, outputFormat) { var img = new Image(); img.crossOrigin = 'Anonymous'; img.onload = function() { var canvas = document.createElement('CANVAS'); var ctx = canvas.getContext('2d'); var dataURL; canvas.height = this.naturalHeight; canvas.width = this.naturalWidth; ctx.drawImage(this, 0, 0); dataURL = canvas.toDataURL(outputFormat); callback(dataURL); }; img.src = src; if (img.complete || img.complete === undefined) { img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; img.src = src; } } toDataURL( 'https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0', function(dataUrl) { console.log('RESULT:', dataUrl) } )

详细

支持的输入格式:

图像/PNG， 图像/JPEG， 图像/JPG， 图像/gif， 图像/BMP， 图像/tiff， 图像/x-icon， 图像/SVG+XML， 图像/WebP， 图像/XXX

支持的输出格式:

图像/PNG， 图像/JPEG， 图像/WebP（Chrome）

浏览器支持:

http://caniuse.com/#feat=canvas Internet Explorer 10 (Internet Explorer 10只能处理相同来源的图像)

3.方法:来自本地文件系统的映像

如果您想从用户文件系统转换映像，则需要采用不同的方法。 使用FileReader API:

函数encodeImageFileAsURL(element) { Var file = element.files[0]; var reader = new FileReader(); 读者。Onloadend = function() { console.log(“结果”,reader.result) ｝ reader.readAsDataURL(文件); ｝ <input type="file" onchange="encodeImageFileAsURL(this)"/>

以下是我所做的:

// Author James Harrington 2014
function base64(file, callback){
  var coolFile = {};
  function readerOnload(e){
    var base64 = btoa(e.target.result);
    coolFile.base64 = base64;
    callback(coolFile)
  };

  var reader = new FileReader();
  reader.onload = readerOnload;

  var file = file[0].files[0];
  coolFile.filetype = file.type;
  coolFile.size = file.size;
  coolFile.filename = file.name;
  reader.readAsBinaryString(file);
}

下面是你如何使用它

base64( $('input[type="file"]'), function(data){
  console.log(data.base64)
})

假设您在浏览器中执行此操作:

等待:

import axios from 'axios'

const response = await axios.get(url, { responseType: 'blob' });
return window.URL.createObjectURL(response.data);

与承诺

import axios from 'axios'

const response = await axios.get(url, { responseType: 'blob' })
  .then((response) => {
    const dataUrl = window.URL.createObjectURL(response.data);
    // do something with your url
  });