效果展示
css
.out-box{
width: 100%
border: 1px solid #e6e6e6
border-radius: 8px
padding: 20px 20px 10px
}
.img-border{
border: 1px solid #e6e6e6
border-radius: 8px
margin-right: 20px
width:100px
height:100px
}
.upload-box{
width: 100px
height:100px
display: inline-block
}
.upload-inner-box{
width: 100px
height: 100px
font-size: 40px
text-align: center
background: #F5F5F5
}
.upload-tip{
color:red
}
template
<div class="out-box">
<img class="img-border" v-if="seeView" :src="this.imageUrl" />
<Upload ref="uploadFiles"
:show-upload-list="false"
:max-size="5120"
:on-success="handleSuccess"
:on-exceeded-size="handleMaxSize"
:before-upload="beforeUploadImg"
:loading="true"
type="drag"
:format="['jpg','jpeg','png','gif']"
:on-format-error="handleFormatError"
action="url"
class="upload-box">
<div class="upload-inner-box">
<div style="padding-top: 20px">+</div>
<div style="font-size: 12px">请上传图片</div>
</div>
</Upload>
<div class="upload-tip">图片大小勿超5M,尺寸为{{minWidth}}*{{minHeight}},勿小于该尺寸,且尽量以该长宽比制图以保证页面效果</div>
</div>
data
seeView:"false",//是否展示已上传的图片
imageUrl:"",//上传图片的url
url:"",//上传的地址
minWidth:number,//最小宽度
minHeight:number,//最小高度
methods
//上传成功
handleSuccess(response, file, fileList) {
this.imageUrl = response.result
this.seeView = true
},
//上传的文件大小超出要求
handleMaxSize() {
this.$Modal.warning({
title: "提示",
content: "上传缩略图大小不能超过5M!!!",
})
},
//上传文件格式不符合要求
handleFormatError() {
this.$Modal.warning({
title: "提示",
content: "上传缩略图格式错误!!!",
})
},
//上传前对图片宽高的检验
beforeUploadImg(file) {
this.checkImageWidth(file, minWidth).then((checkWidth) =>{
if (checkWidth) {
this.checkImageHeight(file, minHeight).then((checkHeight) =>{
if (checkHeight) {
this.$refs.uploadFiles.post(file)
}
})
}
})
return false
},
// 异步方法 检验图片宽度
async checkImageWidth(file, widthCheck) {
let width = await this.getImageWidth(file)
let checkWidth = width >widthCheck || width == widthCheck
if (!checkWidth) {
this.$Notice.warning({
title: "图片宽度错误",
desc:
file.name +
" 的宽度为" +
width +
"px, 请上传宽度大于" +
widthCheck +
"px的图片. ",
})
}
return checkWidth
},
// 获取图片宽度
getImageWidth(file) {
return new Promise((resolve) =>{
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function () {
if (reader.readyState == 2) {
const img = new Image()
img.src = reader.result
img.onload = function () {
resolve(this.width)
}
}
}
})
},
// 异步方法 检验图片高度
async checkImageHeight(file, heightCheck) {
let height = await this.getImageHeight(file)
let checkHeight = height >heightCheck || height == heightCheck
if (!checkHeight) {
this.$Notice.warning({
title: "图片高度错误",
desc:
file.name +
" 的高度为" +
height +
"px, 请上传高度大于" +
heightCheck +
"px的图片. ",
})
}
return checkHeight
},
// 获取图片宽度
getImageHeight(file) {
return new Promise((resolve) =>{
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function () {
if (reader.readyState == 2) {
const img = new Image()
img.src = reader.result
img.onload = function () {
resolve(this.height)
}
}
}
})
},
这几天遇到一个问题,在Upload组件中上传之前需要添加一个Modal,阻止上传, 提示用户信息,用户点击确认按钮后,再进行上传,理想总是很丰满,过程真是狗血呀
于是在API 也找到了方法,提供了一个before-upload方法可以使用,于是乎,兴高采烈的再before-upload中写了
vue-quill-editor是我们在使用vue框架的时候常用的一个富文本编辑器,在进行富文本编辑的时候,我们往往要插入一些图片,vue-quill-editor默认的处理方式是直接将图片转成base64编码,这样的结果是整个富文本的html片段十分冗余,有可能导致提交失败,或者是用户体验很差,数据要传递很久才全部传送到服务器。 因此,在富文本编辑的过程中,对于图片的处理,我们更合理的做法是将图片上传到服务器,再将得到的图片链接插入到富文本中,以达到最优的体验。
首先安装quill editor npm install vue-quill-editor --save
全局挂载
在main.js中引用
使用
在需要用到富文本的vue中引用和配置quill editor工具栏
在editorOption中的handlers事件中处理图片上传(配置中的handlers是用来定义自定义程序的)
iview自带的upload上传自带三个函数
在methods里面处理一下图片
如果有错误,欢迎大家多提提意见~
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)