Element-ui中el-upload上传图片并有预览功能

适用端

• uniapp和vue的PC端使用

功能介绍：

• 上传图片之前显示一个边框的样式
• 上传图片进行预览
• 点击确认上传（接口对接）

效果展示：
上传之前

上传预览（点击确定之前，未对接接口时）

具体实现：

HTML

<el-upload 
	action="/source/upload" 
	accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG"
	:show-file-list="false" 
	:on-change="handleLicensePreview"
	:before-upload="beforeLicenseUpload" 
	:auto-upload="false"
	>
		<img v-if="form.img" :src="form.img" class="preach-img">
		<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

methods

	// 上传图片
	handleLicensePreview(file) {
		const isLt2M = file.size / 1024 / 1024 < 2;
		if (!isLt2M) {
			this.$message.error(this.inter.sctpdx + ' 2MB!');
		} else {
			let fd = new FormData()
			fd.append('file', file.raw)
			// 存储图片，点击确认按钮时统一上传
			this.form.img = URL.createObjectURL(file.raw);
			this.licenseFd = fd
		}
	},
                                                           
    //图片上传限制               
    beforeLicenseUpload(file) {
		const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
		const whiteList = ["jpg", "jpeg", "png", "gif", "JPG", "JPEG"];
		if (whiteList.indexOf(fileSuffix) === -1) {
			this.$message.error(this.inter.scyyzz);
			return false;
		}
		const isLt2M = file.size / 1024 / 1024 < 2;
		if (!isLt2M) {
			this.$message.error(this.inter.sctpdx + ' 2MB!');
			return false;
		}
	}

el-upload属性值

参数	含义
action	不可少的一项，上传的地址
accept	接受上传的文件类型
show-file-list	是否显示已上传文件列表
on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
before-upload	是否在选取文件后立即进行上传，一般为限制文件格式等条件
auto-upload	是否在选取文件后立即进行上传

注：绑定值根据具体情况进行相应修改
文章如有错误请指教，谢谢