文件上传方式： URL.createObjectURL() 和 FileReader.readAsDataURL()的区别
-
URL.createObjectURL()
简单来说：URL.createObjectURL()处理后生成了一个临时的链接，直接赋值给src就行。
使用方式：
this.imageUrl = URL.createObjectURL(file.raw);示例：
<!-- 预览图片 -->
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="imageUrl" />
</el-dialog>
//js中
fileChange(file) {
// 文件本地预览
const URL=window.URL||window.webkitURL //window.URL||window.webkitURL是浏览器兼容性写法
this.imageUrl = URL.createObjectURL(file.raw);
},-
FileReader.readAsDataURL()
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，
使用 File 或 Blob 对象指定要读取的文件或数据。
简单来说：异步读取指定的Blob中的内容，一旦完成，会返回一个
data:URL格式的字符串以表示所读取文件的内容。
使用方式：
fileStr = FileReader.readAsDataURL(file)；示例：
<img v-if="base64Img || updateFormData.imgUrl"
style="
height: 100px;
display: inline-block;
vertical-align: bottom;
"
:src="base64Img || updateFormData.imgUrl"
/>
//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格式，可以直接用于业务，无需二次转换格式。