Vue+wangeditor富文本+element——--上传+下载文件+图片预览

一：上传文件

HTML

<el-upload class="upload-demo" action="haircut/upload" :on-preview="handlePreview":on-remove="handleRemove" :before-upload="handleBeforeUpload" :on-success="handleSuccess":before-remove="beforeRemove" :limit="1" :file-list="fileList"><el-button size="small" type="primary">点击上传</el-button></el-upload>

fileUrl: '', //文件地址fileUrlName: '', //文件名称inputContent: '', // 内容
//——————————————————————————————————————————————
handleRemove(file, fileList) { // 文件列表移除文件时的钩子console.log(file, fileList)let that = thisthat.inputContent = ''//清除富文本内容that.fileUrlName = ''that.fileUrl = ''},handleBeforeUpload(file) {//1MB=1024*1024(1MB=1024KB 1KB=1024MB)const is2M = file.size / 1024 / 1024 < 2;//限制文件上传大小if (!is2M) {this.$message.error("上传大小不能超过 2MB!");}// return false},handleSuccess(response, file, fileList) { // 文件上传成功时的钩子if (response.code === 100) {console.log(fileList[0].name)this.fileUrlName = fileList[0].name//文件名// this.inputContent = response.info.fileUrlthis.fileUrl = response.info.fileUrlthis.inputContent = fileList[0].name}},handlePreview(file) { // 点击文件列表中已上传的文件时的钩子console.log(file)},// handleExceed(files, fileList) {//   this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)// },beforeRemove(file, fileList) { // 删除文件之前的钩子return this.$confirm(`确定移除 ${file.name}？`)},

下载文件（因为.txt会直接在浏览器里打开，所以这里选择在新窗口下载文件）

HTML就是图片预览的 HTML

js，图片预览也包含一部分

//文件下载downloadUrl(url, fileUrlName) {const a = document.createElement('a')const event = new MouseEvent('click')a.download = fileUrlNamea.target = '_blank'a.href = url// a.href = url.substring(url.length - 17)a.dispatchEvent(event)},

图片预览：

HTML

点击放大消息列表里的图片为缩略图

<div class="chat-right_triangle-type-Three" v-if="item.messageType==3"><!-- <p @click="showdialogFormVisible(item, index)" v-html="item.message" /><img src="../../assets/Images/fileText.png"> --><a :href="item.custom.fileUrl" :download="item.custom.fileUrlName" target="_blank"><div class="file-css"><p class="text_ellipsis" @click="showdialogFormVisible(item, index)">{{item.custom.fileUrlName}}</p><p class="text_ellipsis-img"><img src="../../assets/Images/fileText.png">  </p></div></a></div>

element 预览

<!-- 放大图片 --><div v-show="dialogFormVisible" class="msk"><button type="button" @click.self="closedialog">关闭</button><div class="demo-image__preview" v-show="dialogFormVisible"><!-- <div v-show="dialogFormVisible" class="dialog" > --><!-- <div v-html="dialogMesa.message" @mousewheel.prevent="imgMove" ref="imgDiv" /> --><el-image :src="testImg" :preview-src-list="srcList"> </el-image></div><span class="demo-image-tips">点击图片预览</span></div>

css

 .msk {background: rgba(95, 95, 95, 0.5);width: 100%;height: 100%;z-index: 10;position: absolute;display: flex;flex-direction: column;/* margin-right: 50%; */right: 0%;button{width: 50px;height: 50px;position: fixed;left: 80%;top: 15%;border: none;background-color: #ff5500;color: #fff;cursor: pointer;margin: 0 auto;// transform: translateX(148%) translateY(-5%);}::v-deep img {width: auto !important;height: auto !important;max-width: 50% !important;max-height: 50% !important;// position: absolute;// object-fit: contain !important;}}.demo-image-tips{text-align: center;color: #fff;position: fixed;left: 43%;margin-top: 27%;// bottom: 10%;width: 150px;background-color: #55aaff;height: 30px;line-height: 30px;border-radius: 10px;}.demo-image__preview{width: 50%;height:50%;position: fixed;cursor: pointer;z-index: 20;padding-left: 30%;padding-top: 10%;overflow: hidden;}.dialog {// height: auto;width: auto;/* width: 50%; */height:50%;transform: translateX(-50%) translateY(40%);left: 50%;z-index: 100;// position: relative;position: fixed;max-width: 50% !important;overflow: auto;::v-deep div{position: relative;margin: 0 !important;width: 100%;height: 100%;}}

获取图片在数组中的位置并把选中图片放到数组第一个元素的位置

 // 放大图片showdialogFormVisible(item, index) {if (item.messageType === 3) {this.dialogFormVisible = 0// 下载文件this.downloadUrl(item.custom.fileUrl, item.custom.fileUrlName)} else if (item.messageType === 1 || item.messageType === 2) {this.dialogFormVisible = 1this.dialogIndex = indexthis.dialogMesa = item// 实现图片放大缩小const ahref = item.message //p标签console.log(ahref)if (ahref.includes('img')) {if (ahref.includes('zip')) {} else {// console.log(ahref)const aa = ahref.indexOf('"https:')const ff = ahref.substring(aa + 1); //获取第一个https后面所有字符// console.log(ff)const bb = ff.indexOf('"') //获取第一个 " 的位置// console.log(bb)const ee = ff.substring(0, bb)this.testImg = ee// console.log(this.testImg) //okif (this.srcList.length === 0) { //历史记录没有图片时} else {let index = this.srcList.findIndex(item => item == this.testImg); //根据 已知this.testImg获取在数组中的位置(index)；// console.log(this.srcList)//聊天记录里所有图片地址let thobj = this.srcList.splice(index, 1); //从数据组移出当前数据；// console.log(thobj)this.srcList.splice(0, 0, ...thobj); // 把当前数据插入到数组第一位；}}}}},

获取聊天记录里所有图片地址并添加到数组里

 // 获取聊天记录getMsgList(pageNum, userId) {request({url: 'common/chatHistory/list',method: 'POST',data: {'pageNum': pageNum, // 页码'pageSize': 10, // 每页条数'shopId': 1, // 店铺Id'userId': userId // 用户Id}}).then(res => {// console.log(res)this.totalSize = res.info.totalSize // 总页数this.totalPages = res.info.totalPages // 总条数this.kefuList = res.info.content// console.log(this.kefuList)this.friends.forEach((e) => {if (e.userId == userId) {e.number = 0}})// =====const arr = []this.srcList = []res.info.content.forEach((e) => {e.message = JSON.parse(e.message)// 使用客服最新的头像昵称e.message.userName = e['userName']e.message.photo = e['photo']arr.push(e.message)const ahref = e.message.message //p标签// 实现图片放大缩小if (ahref.includes('img')) {if (ahref.includes('zip')) {} else {const aa = ahref.indexOf('"https:')const ff = ahref.substring(aa + 1); //获取第一个https后面所有字符const bb = ff.indexOf('"') //获取第一个 " 的位置const ee = ff.substring(0, bb)this.srcList.push(ee)this.srcList = this.srcList.reverse() //倒序}}})// this.sendMessage = []this.sendMessage = [...arr, ...this.sendMessage] // 合并数组if (this.sendMessage.length <= 10) {this.noMore = true} else {this.noMore = false}const el = this.$refs['ref_messages_nodes']this.scrollHeight = el ? el.scrollHeight : 0// if (this.changeuser == false && this.pageNum == 1) {if (this.pageNum == 1) {// 首次渲染后获取scrollHeight并滑动到底部。setTimeout(() => {this.scrollBottm()}, 20)} else {// 滚动到加载前的位置setTimeout(() => {const currScrollHeight = el.scrollHeightel.scrollTo(0, currScrollHeight - this.scrollHeight)}, 20)}this.changeuser = falsethis.historyInfor = false})},

Vue+wangeditor富文本+element——--上传+下载文件+图片预览相关推荐

基于Mongodb的文件上传下载，图片预览
1.依赖 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-b ...
dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库....
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器
原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器以前写过上传组件,见打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一 ...
pdf上传及预览；file上传pdf文件及预览；vue上传pdf文件及预览；vue-pdf预览pdf文件
需求:上传pdf文件,并点击可以打开预览.使用input的file功能即可完成,预览只需要跳转到pdf的url地址即可.还可以配合vue-pdf直接预览,点击看这篇. 以下代码可直接复制使用!!!有效 ...
前端js华为云obs上传下载文件与进度条的设置
前端js华为云obs上传下载文件与进度条的设置首先下载OBS BrowserJS SDK安装包用git将代码拉到本地 git clone https://github.com/huaweiclou ...
JavaWeb：上传下载文件
1. 文件上传概述 1.1 文件上传的作用例如网络硬盘!就是用来上传下载文件的. 在智联招聘上填写一个完整的简历还需要上传照片呢. 1.2 文件上传对页面的要求上传文件的要求比较多,需要记一下: ...
利用PostMan 模拟上传/下载文件(亲测)
来源:利用PostMan 模拟上传/下载文件 - 王若伊_恩赐解脱 - 博客园我们经常用postman模拟各种http请求.但是有时候因为业务需要,我们需要测试上传下载功能.其实postman也是很 ...
linux ftp 登录慢,linux中vsftpd登录,上传下载文件慢解决办法linux操作系统 -电脑资料...
vsftpd登录慢主要是nameserver #定义DNS服务器的IP地址没有设置了,这样我们只要设置或更新一下nameserver即可解决了, 在使用vsftpd的过程中,一直以来都有一个问题就是在 ...
HttpClient上传下载文件
HttpClient上传下载文件 java HttpClient Maven依赖 <dependency><groupId>org.apache.httpcomponents& ...

Vue+wangeditor富文本+element——--上传+下载文件+图片预览

Vue+wangeditor富文本+element——--上传+下载文件+图片预览相关推荐

最新文章

热门文章