Vue+UpLoad实现上传、点图预览、删除图片

1、用vue+Element完成一个图片上传、点图预览、加删除功能，如图：

2.首先我们再组件中引入这一段代码，每个属性的使用也都放在这里了：

<el-uploadclass="upload-demo"action=""//引号里面填要上传的图片地址，用接口的话是公共的接口地址拼接一个图片的接口:on-preview="handlePreview"//图片已经上传完成时点击触发（钩子函数）:on-remove="handleRemove"//点击右上角X号触发的钩子函数:on-success="handleSuccess"//上传成功的一个钩子函数:file-list="fileList"//上传的文件列表list-type="picture"//上传的文件类型，有三个参数，分别是text/picture/picture-card，分别是文本类型、图片类型、卡片类型。个人推荐选第二个较好:headers="headerObj"//图片上传的时候需要请求头部，我们可以定义一个变量，设置获取token信息，如下代码:
><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>//存放token的变量headerObj: {Authorization: window.localStorage.getItem("token"),},

3.接下来就是它的on-preview属性，我们可以用它来实现图片预览

先要设一个图片预览的弹框：

  <el-dialogtitle="图片预览"//上方的标题:visible.sync="previewDialogVisible"//控制显示隐藏的变量width="50%"//弹框的宽度占比>//img标签中的src属性接受的是点击预览时传递的图片地址<img :src="picPreviewPath" alt="" class="previewImg" /></el-dialog>

再进行逻辑操作

  // 处理图片预览handlePreview(file) {//会得到一个参数，这是返回的图片的一些信息，主要的是图片的urlthis.picPreviewPath = file.response.data.url;//把url参数赋值给这个变量this.previewDialogVisible = true;//再让弹框显示},

3.然后来实现点击删除图片，这时候用到了on-remove这个属性

 // 处理移除图片的操作handleRemove(file) {// 1.获取将要删除图片的临时路径const filePath = file.response.data.tmp_path;// 2.从pics数组中，找到图片对应的索引值const i = this.addForm.pics.findIndex((x) => x.pic === filePath);// 3.调用splice方法，移除图片信息this.addForm.pics.splice(i, 1);},

4.前面的功能都实现了的话，到这时候你已经成功了一半了，若项目需要提交添加的图片，则用到了它的on-success属性。

 // 监听图片上传成功事件handleSuccess(response) {// 1.拼接得到一个图片信息对象 临时路径const picInfo = { pic: response.data.tmp_path };// 2.将图片信息对象，push到pics数组中this.addForm.pics.push(picInfo);},

5.文章小提示：

1.别忘了给需要设置成动态属性的属性加上v-bind

2.在data中注册需要绑定的变量

就此完成，文章条理清晰，言简意赅，造福大家，谢谢支持。

Vue+UpLoad实现上传、点图预览、删除图片相关推荐

微信小程序删除服务器图片,微信小程序实现图片上传放大预览删除代码
本文实例为大家分享了微信小程序图片上传放大预览的具体代码,供大家参考,具体内容如下 image.js代码: = 9) { this.setData({ lenMore: 1 }); setTimeou ...
图片上传，预览以及图片删除
背景前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...
Vue中通过el-upload组件实现上传前预览本地图片
1.实现效果如下图所示用户选择本地待上传的图片,选择成功后,上传组件隐藏,呈现本地预览组件,单击图片并实现图片的放大呈现 2.template(相当于html)部分的代码如下代码实现逻辑: 在el ...
JQ input 文件上传并预览选择图片后,在页面上预览图片,页面渲染
有时候,我们更新界面信息时会遇到,选择图片后,并不能预览图片,必须提交数据库后才能在页面上显示出来,这样我们该怎样办呢? 起始jq为我们提供了两个方法change()和URL.createObject ...
微信小程序多图片上传支持预览删除设置数量上限
github地址: https://github.com/Volcano-Yang/miniprogram-picture-upload Miniprogram-Picture-Upload 努力帮助 ...
html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
html ie8上传图片,图片上传本地预览兼容ie8
工作中遇到的,总结下来了,图片上传本地预览限制图片最大为2M 图片上传本地预览 #preview1{width:260px;height:190px;border:1px solid #000;ove ...
antd vue upload组件上传视频并实现视频预览
antd vue upload组件上传视频并实现视频预览 html代码 <form><a-form-itemlabel="商品视频":labelCol=" ...
vue富文本编辑，编辑自动预览，单个图片上传不能预览的问题解决：
vue富文本编辑,编辑自动预览,单个图片上传不能预览的问题解决: 参考文章: (1)vue富文本编辑,编辑自动预览,单个图片上传不能预览的问题解决: (2)https://www.cnblogs.co ...
XX健康:预约管理-套餐管理图片上传与预览Redis实现定时清理垃圾图片
1. 新增套餐 1.1 需求分析套餐其实就是检查组的集合,例如有一个套餐为"入职体检套餐",这个体检套餐可以包括多个检查组:一般检查.血常规.尿常规.肝功三项等.所以在添加套餐时 ...

Vue+UpLoad实现上传、点图预览、删除图片

Vue+UpLoad实现上传、点图预览、删除图片相关推荐

最新文章

热门文章