Vue图片上传删除预览操作

样式是通过element-ui实现的，使用的时候要先导入所需组件
html

<!-- action 表示图片要上传到的后台API地址  （1.9接口）  -->
<!-- on-preview 预览图片 --><!-- list-type 预览图片的预览方式 --><el-upload:action="uploadURL":on-preview="handlePreview":on-remove="handleRemove"list-type="picture":headers="headerObj":on-success="handleSuccess"><el-button size="small" type="primary">点击上传</el-button></el-upload><!-- 预览图片的对话框 -->
<el-dialog title="图片预览" :visible.sync="previewVisible" width="50%"><img :src="previewPath" alt="" class="previewImg" />
</el-dialog>

data

addForm: {// 图片的数组pics: [],
},// 上传图片的URL地址
uploadURL: 'http://127.0.0.1:8888/api/private/v1/upload',
// 图片上传组件的headers请求头对象
headerObj: {Authorization: window.sessionStorage.getItem('token'),
},
// 预览图片
previewPath: '',
// 控制 预览图片 对话框 的 显示与隐藏
previewVisible: false,

// 处理图片预览效果handlePreview(file) {console.log(file)this.previewPath = file.response.data.urlthis.previewVisible = true},// 处理移除图片的操作handleRemove(file) {console.log(file)// 1.获取将要删除的图片的临时路径const filePath = file.response.data.tmp_path// 2.从pics数组中，找到这个图片对应的索引值const i = this.addForm.pics.findIndex((x) => x.pic === filePath)// 3.调用数组的 splice 方法，把图片信息对象，从 pics 数组中移除this.addForm.pics.splice(i, 1)console.log(this.addForm)},// 监听图片上传成功的事件handleSuccess(response) {console.log(response)// 1.拼接得到一个图片信息对象const picInfo = { pic: response.data.tmp_path }// 2.将图片信息对象，push到pics数组中this.addForm.pics.push(picInfo)console.log(this.addForm)},

css

.previewImg {width: 100%;
}

Vue图片上传删除预览操作相关推荐

MUI 图片上传、预览、删除重选等等实现
MUI 图片上传.预览.删除重选等等实现本地项目路径: C:\Users\Administrator\Desktop\超实用的javascript代码\10.5 - MUI 轮播\login\set ...
vue富文本编辑，编辑自动预览，单个图片上传不能预览的问题解决：
vue富文本编辑,编辑自动预览,单个图片上传不能预览的问题解决: 参考文章: (1)vue富文本编辑,编辑自动预览,单个图片上传不能预览的问题解决: (2)https://www.cnblogs.co ...
微信小程序删除服务器图片,微信小程序实现图片上传放大预览删除代码
本文实例为大家分享了微信小程序图片上传放大预览的具体代码,供大家参考,具体内容如下 image.js代码: = 9) { this.setData({ lenMore: 1 }); setTimeou ...
XX健康:预约管理-套餐管理图片上传与预览Redis实现定时清理垃圾图片
1. 新增套餐 1.1 需求分析套餐其实就是检查组的集合,例如有一个套餐为"入职体检套餐",这个体检套餐可以包括多个检查组:一般检查.血常规.尿常规.肝功三项等.所以在添加套餐时 ...
uni-app知识点整理（5）- 网络请求、数据缓存、图片上传和预览
目录一.网络请求 1.1 发送get请求二.数据缓存 2.1 uni.setStorage(OBJECT) 2.2 uni.setStorageSync(KEY,DATA) 2.3 uni.get ...
alert()的功能_前端实现简单的图片上传小图预览功能
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
DevExpress控件使用系列--ASPxUploadControl（图片上传及预览）
1.控件功能列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例 2.1 ASPxImage http:// ...
html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果很早以前在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

Vue图片上传删除预览操作

Vue图片上传删除预览操作相关推荐

最新文章

热门文章