前言
-
在实际开发中经常需要在from表单上传图片,比如考试封面,文件封面。等等
-
在element-ui 有现成的,但是他需要上传到地址,晚上查阅的也有现成的,太重了。
-
我们的需求就是上传一个图片预览,获取到base路径,双向绑定到form表单,传给后端保存。
-
我们可以通过2个盒子+input的file类型+自定义点击事件dispatchEvent就可以实现了
直接上代码
// form表单结构
<el-form-item label="试卷封面">
<div class="picture">
<el-image :src="addform.cover"></el-image>
<div class="uppicture">
<input
type="file"
class="upinput"
ref="file"
@change="showimg"
/>
<i class="el-icon-plus" id="changes" @click="changeimg"></i>
</div>
</div>
</el-form-item>
通过方法把图片路径绑定给form表单
// 预览图片
showimg() {
const that = this;
console.log(that.$refs.file);
console.log(that.$refs.file.files[0]);
// 读取文件内容
var fr = new FileReader();
// 将读取到的文件编码成DataURL
fr.readAsDataURL(that.$refs.file.files[0]);
// 文件读取成功时触发
fr.onload = function () {
// base64格式的图片
console.log("base64格式", fr.result);
that.addform.cover = fr.result;
};
},
// 更换图片
changeimg() {
// 给元素添加自定义事件
this.$refs.file.dispatchEvent(new MouseEvent("click"));
},
样式
.el-form {
margin: 30px 15px 10px 0;
.el-image {
width: 120px;
height: 120px;
border: 1px solid #ccc;
margin-right: 10px;
}
.picture {
display: flex;
justify-content: space-around;
.uppicture {
flex: 1;
position: relative;
border: 1px solid #ccc;
input {
width: 100%;
height: 100%;
vertical-align: middle;
opacity: 0;
}
i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
}
}
}
}
细节
注意image src路径 和表单的名字 绑定的名字可以直接复制
经过这一趟流程下来相信你也对 vue form表单图片上传 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!
什么不足的地方请大家指出谢谢 -- 風过无痕