文件上传方式： URL.createObjectURL() 和 FileReader.readAsDataURL()的区别

•  URL.createObjectURL()

简单来说：URL.createObjectURL()处理后生成了一个临时的链接，直接赋值给src就行。

使用方式：

    this.imageUrl = URL.createObjectURL(file.raw);

示例： 

  
        
          
        

//js中
    fileChange(file) {
       // 文件本地预览
       const  URL=window.URL||window.webkitURL    //window.URL||window.webkitURL是浏览器兼容性写法
      this.imageUrl = URL.createObjectURL(file.raw);
    },

•  FileReader.readAsDataURL()

1. FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，

2. 使用 File 或 Blob 对象指定要读取的文件或数据。

3.  简单来说：异步读取指定的Blob中的内容，一旦完成，会返回一个data: URL格式的字符串以表示所读取文件的内容。

使用方式： 

fileStr = FileReader.readAsDataURL(file)；

示例：

  

//js(图片预览部分)：
function base64Img(file){
      var reader = new FileReader();    //创建实例
      reader.readAsDataURL(file);
      reader.onload = (e) => {

             // this.base64Img=e.target.result

              this.base64Img = reader.result;
       }
}

 除此（readAsDataURL()方法）之外，还有以下几种转化（格式）的方法：

1	readAsText(file)	异步按字符读取文件内容，结果用字符串形式表示
2	readAsArrayBuffer(file)	异步按字节读取文件内容，结果用ArrayBuffer对象表示
3	readAsBinaryString(file)	异步按字节读取文件内容，结果为文件的二进制串
4	readAsDataURL(file)	异步读取文件内容，结果用data:url的字符串形式表示

最后说一下上述两者的区别：

1）返回值

        FileReader.readAsDataURL(file)可以得到一段base64的字符串；

        URL.createObjectURL(file)得到的是当前文件的一个内存url；

（2）内存使用

         FileReader.readAsDataURL(file)得到一段超长的base64的字符串；
         URL.createObjectURL(file)得到的是一个url地址；

（3）内存清理

          FileReader.readAsDataURL(file)  依照js垃圾回收机制自动从内存中清理；
          URL.createObjectURL(file)存在于当前document内，清除方式只有upload()事件或者revokeObjectURL()手动清除；

（4）执行方式
          FileReader.readAsDataURL(file)通过回调的方式f返回，异步执行；
          URL.createObjectURL(file) 直接返回，同步执行；

（5）多个文件
          FileReader.readAsDataURL(file)同时处理多个文件时，需要一个文件对应一个FileReader对象；
          URL.createObjectURL(file) 依次返回，没有影响；

总结：

        URL.createObjectURL(file) 得到本地内存容器的URL地址，方便预览，多次使用需要注意手动释放内存的问题，性能好。
        FileReader.readAsDataURL(file)胜在直接转为base64格式，可以直接用于业务，无需二次转换格式。