关于本地上传图片时的预览(结合el-upload)_upload 文件上传后在线预览-CSDN博客

本文链接：https://blog.csdn.net/weixin_44845160/article/details/130764535

文章介绍了在Web开发中，如何利用浏览器的URL.createObjectURL方法来实现本地图片预览，以及在Vue.js环境下，如何结合el-upload组件控制文件上传，包括关闭自动上传，手动触发上传，以及处理上传成功和失败的回调。在预览新图片时，需要释放之前创建的对象URL以避免内存泄漏。

摘要由CSDN通过智能技术生成

场景：本地需要上传图片，先在本地预览，最后再提交到服务器。

使用浏览器的web API接口的**URL.createObjectURL()**方法，参考地址：URL.createObjectURL()方法介绍

该方法跟FileReader.readAsDataURL的异同：URL.createObjectURL()的使用方法

使用时的代码：

<!-- 
	auto-upload=false  先关闭el-upload的自动上传改为手动
-->
<el-upload
   :action="'要上传到服务器地址的api'"
   accept="image/png, image/gif, image/jpeg"
   :show-file-list="false" 
   :on-change="onChange" 
   :auto-upload="false"
   :on-success="uploadSuccess"
   :on-error="uploadError"
   :headers="'可能需要设置的token'"
 >
   <img
     :src="pictureURL"
   />
 </el-upload>

// 本地预览图片转换
 readImg(file) { 
   if(!file) {
     return
   } else {
     let URL = window.URL || window.webkitURL; 
     // 相当于如下(直接引用new URL，控制台显示不是构造函数，通过window调用)
     // let u = window.location.origin
     // let URL = new URL(u); // 直接在vue中获取不到此构造函数
     if(this.pictureURL) {
       URL.revokeObjectURL(this.pictureURL) // 每次显示新的预览图片时，先释放上一次的图片内存
     }
     let ImgURL = URL.createObjectURL(file.raw); // 转化文件为本地路径资源
     return ImgURL 
   }
 },
// 添加文件或文件状态改变时回调
/**
file的返回格式
{
	name: (…),
	percentage: (…),
	raw: (…),
	size: (…),
	status: (…),
	uid: (…)
}
*/
 onChange(file, fileList) {
   if(file.status=='ready') { // 判断文件状态
     this.pictureURL = this.readImg(file)
   }
 },