概述
一：上传文件
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>js
fileUrl: '', //文件地址
fileUrlName: '', //文件名称
inputContent: '', // 内容
//——————————————————————————————————————————————
handleRemove(file, fileList) { // 文件列表移除文件时的钩子
console.log(file, fileList)
let that = this
that.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.fileUrl
this.fileUrl = response.info.fileUrl
this.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 = fileUrlName
a.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%;
}
}js
获取图片在数组中的位置并把选中图片放到数组第一个元素的位置
// 放大图片
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 = 1
this.dialogIndex = index
this.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) //ok
if (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.scrollHeight
el.scrollTo(0, currScrollHeight - this.scrollHeight)
}, 20)
}
this.changeuser = false
this.historyInfor = false
})
},
最后
以上就是土豪金毛为你收集整理的Vue+wangeditor富文本+element——--上传+下载文件+图片预览的全部内容，希望文章能够帮你解决Vue+wangeditor富文本+element——--上传+下载文件+图片预览所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复