前段时间项目需求中涉及到上传多张图片 当条信息查看时可预览大图功能，项目框架vue.js+elementUI,抽时间在此做个整理记录，如有更好的方法 欢迎大家互相交流
页面列表更多操作-修改-先选择图片 点击确定时上传所有，查看-点击图片 就是查看图片大图
上传多张图片：el-upload组件
查看-大图预览左右切换：el-image组件
开发查看-大图预览时 发现个问题:用的组件页面没有效果，经排查是因为之前项目引的elementUI js css版本过旧 没有包含el-image组件，大家开发时候注意下
效果图如下：
直接贴代码如下：
里面有一些是项目的公共方法就不细写了，大家可参考图片上传代码的思路和步骤，具体请以自己的项目为准
// css 图片个数够5张时 上传按钮框隐藏
.disUoloadSty .el-upload--picture-card{
display:none;/*上传按钮隐藏*/}
action="#"
ref="upload"multiple
list-type="picture-card":auto-upload="false"accept=".jpeg,.jpg,.png,":file-list="fileLists":on-preview="handlePictureCardPreview":limit="5":on-change="OnChange":on-remove="handleRemove":class="{disUoloadSty:hideUploadEdit}"
>
注：最多上传5张图片
//查看时 用的elementUI el-image组件 具体用法可查看elementUI官网
//修改-大图预览框
dialogImgVisible: false,大图预览框
hideUploadEdit:false,//图片个数设置 超过5张为true
//上传文件之前的钩子
OnChange:function (file, fileList) {
console.log(file)var testmsg = file.name.substring(file.name.lastIndexOf('.')+1)const extension = testmsg === 'jpeg'
const extension2 = testmsg === 'jpg'
const extension3 = testmsg === 'png'
const isLt2M = file.size / 1024 / 1024 < 10
if(!isLt2M){this.$message({
type:'warning',
message:'文件大小请限制在10M以内'});
}if(!extension && !extension2 && !extension3) {this.$message({
message:'上传文件只能是 jpeg、jpg、png格式!',
type:'warning'});
}this.fileLists.push(file)this.hideUploadEdit = fileList.length >= 5
return (extension || extension2 || extension3) &&isLt2M;
},//提交上传图片前，和其他参数
UploadImg:function(){var _this = thislet fd= newFormData()
let imgIDs=[]
_this.fileLists.forEach(function(item,index){
//判断是新选择的图片 还是已经上传成功的if(item.raw){
fd.append('file',item.raw)
}else{
imgIDs.push(item.id)
}
})if(imgIDs.length >0) fd.append('imgIDs',imgIDs)
//将其他参数一起放到formData中，removeNullStr是一个去除null的公共方法，可参考我这个博客/hanhanours/p/13602396.htmlfor(key inremoveNullStr(_this.form)){
fd.append(key,_this.form[key])
}returnfd;
},//提交表单
submitForm: function (formName) {var _this = this;_submit(_this, _this.urls.updateUrl, formName, function () {
_this.dialogFormVisible= false;
_this.dialogFormVisible2= false;
}, _this.UploadImg())},//修改-大图预览
handlePictureCardPreview:function(file){var _this = this;
_this.dialogImgVisible= true;
//这里项目中做了弹框设置，判断是新选择的图片url 还是已经存在的图片urlif(file.raw){
_this.dialogImageUrl=file.url;
}else{
_this.dialogImageUrl=file.urls;
}
},//修改-删除图片
handleRemove: function(file, fileList) {var _this = this_this.fileLists=fileList
_this.hideUploadEdit= fileList.length >= 5},
//获取图片路径
getImgLists:function (type,id) {var _this = thislet ImgFileList=[];
axios.post(_this.urls.GetImgList,{type:type,routeRecordID:id}).then(function (res) {if(res.data.IsSuccess){
ImgFileList=res.data.Data;
let FilePathResult=[]
let previewPath=[]for(varitem of ImgFileList){
FilePathResult.push({
name:item.FileName,
id:item.ImgID,
url:'/ProjectRouteRecordGas/View?path='+item.SmallFilePath, //缩略图
urls:'/ProjectRouteRecordGas/View?path='+item.BigFilePath //大图
});
//存放大图路径 查看-预览大图会用到
previewPath.push('/ProjectRouteRecordGas/View?path='+item.BigFilePath)
}
_this.fileLists=FilePathResult
_this.previewList=previewPath
_this.hideUploadEdit= _this.fileLists.length >= 5}else{
_this.open(res.data.Message,'错误提示', 'error')
}
})
},//查看-大图预览
getPreviewImgList:function(index) {
let arr=[]
let i= 0;for(i;i < this.previewList.length;i++){
arr.push(this.previewList[i+index])if(i+index >= this.previewList.length-1){
index= 0-(i+1);
}
}returnarr;
},
