基本代码
<el-form-item label="文章封面">
<!-- 用来显示封面的图片 -->
<img
src="../../../assets/images/cover.jpg"
alt=""
class="cover-img"
ref="imgRef"
/>
//不要在 img标签中使用 v-if 会报错
<br />
<!-- 文件选择框,默认被隐藏 -->
<input
type="file"
style="display: none"
accept="image/*"
ref="iptFileRef"
@change="onCoverChangeFn"
/>
<!-- 选择封面的按钮 -->
<el-button type="text" plain @click="addCoverImgFn"
>+ 选择封面</el-button
>
</el-form-item>
导入图片
import defaultImg from '@/assets/images/cover.jpg'
具体逻辑
addCoverImgFn() {
// 模拟点击事件
this.$refs.iptFileRef.click()
},
// 封面选择改变事件
onCoverChangeFn(e) {
const files = e.target.files
console.log('封面选择改变事件', e)
if (files.length === 0) {
// 用户没有选择图片
this.pubForm.cover_img = null
this.$message.error('请选择你要上传的图片')
this.oldFox('请选择你要上传的图片')
this.$refs.imgRef.setAttribute('src', defaultImg)
} else {
this.pubForm.cover_img = files[0]
this.$message.success('添加封面成功')
this.oldFox('添加封面成功')
const url = URL.createObjectURL(files[0])
this.url = url
this.$refs.imgRef.setAttribute('src', url)
}
console.log('文件', files)
}
封面标签选择图片的思路是
标签:files,封面,url,标签,选择,图片 From: https://www.cnblogs.com/NaziriteGTC/p/17071538.html先准备隐藏的input[type=file], 然后点击按钮, 用js的方式调用input标签的点击事件, 让文件选择窗口出现, 再给input标签绑定change事件通过事件对象拿到用户选择的图片文件