vue中按钮点击上传图片并预览

一天一天积累

于 2021-03-29 15:36:31 发布

阅读量827

点赞数

分类专栏： vue 文章标签：上传图片预览图片

本文链接：https://blog.youkuaiyun.com/u012011360/article/details/115302482

版权

本文介绍了如何在Vue项目中实现图片上传和预览功能，通过HTML的input元素结合JavaScript处理文件读取，展示了一种在前端实现图片上传预览的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html部分：

<input type="file" ref="filElem" class="upImage" accept="image/*" @change="onFileChange" />

<div v-if="!pic" @click="uppic">上传照片</div>

 <div v-else class="haspic"  @click="uppic">

      <img :src="pic"/>

 </div>

js部分：

data: {
		pic:''
					
	}, 
methods: {        
         uppic(){

                this.$refs.filElem.dispatchEvent(new MouseEvent('click')) 

          },

          onFileChange(e) {

            let that = this;

            let file = e.target.files[0];

            //对文件检查

            let allType = "image/png,image/gif,image/jpeg,image/jpg,image/svg";

            if (allType.indexOf(file.type) == "-1") {

              showTips("请选择图片文件");

              return fal

最低0.47元/天解锁文章