本地图片上传服务器转base64

Question

本地选择图片然后通过ajax上传服务器，不想用form表单，用h5的fileReader报错，怎么解决

转换的代码

convertToBase64() {

    let fileReader = new FileReader()

    //最大上传2m的图片

    const AllowImgFileSize = 2100000

    let imgUrlBase64;

    imgUrlBase64 = fileReader.readAsDataURL('https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg')

    fileReader.onloadend = function() {

      if (AllowImgFileSize != 0 && AllowImgFileSize < fileReader.result.length) {

        alert( '上传失败，请上传不大于2M的图片！')

        return

      }else{

        console.log(imgUrlBase64)

        //执行上传操作

        console.log(fileReader.result);

      }

    }

  }

现在是传死了一个在线的图片地址，实际是input（type=file）获取到的值

传这两种值都报错

真的不知道怎么解决，第一次用fileReader。
这个是最简单的，还有没有别的简单可行的方法。用的是react框架

Answer 1

本地选择图片然后通过ajax上传服务器，不想用form表单上传图片还真的只能用multipart/form-data，就是你所说的form表单。因为其他body通常收长度限制，你想用base64发必须让后台支持你的长度，而如果在同时被body足够长的报文攻击直接GG。事实上你在input=file选中文件返回的就是File,通过FormData接口用ajax传上去就好了，而其他方式你根本获取不了本地图片，你的例子是想通过远程图片服务器1去上传到远程图片服务器2么？如果你真是要做这件事倒可以转成blob再按前面说的方式上传。（奇怪的需求）

Answer 2

readAsDataURL()的参数不是一个字符串的url吧，应该是一个blob或者file对象。个人感觉应该用xhr先获取到真正的图片文件

Answer 3

你读取本地文件怎么会拿到一个服务器的文件路径呢? fileReader基于Blob实现,只能读取Blob://类型的文件, 用户选择完本地文件你拿到的也是Blob类型. 你这里的问题就是路径的问题