前段时间项目需求中涉及到上传多张图片 当条信息查看时可预览大图功能，项目框架vue.js+elementUI,抽时间在此做个整理记录，如有更好的方法 欢迎大家互相交流

页面列表更多操作-修改-先选择图片 点击确定时上传所有，查看-点击图片 就是查看图片大图

上传多张图片： el-upload组件

查看-大图预览左右切换：el-image组件

开发查看-大图预览时 发现个问题:用的组件页面没有效果，经排查是因为之前项目引的elementUI js css版本过旧 没有包含el-image组件，大家开发时候注意下

效果图如下：

直接贴代码如下：

里面有一些是项目的公共方法就不细写了，大家可参考图片上传代码的思路和步骤，具体请以自己的项目为准

// css 图片个数够5张时 上传按钮框隐藏

.disUoloadSty .el-upload--picture-card{

display:none;/*上传按钮隐藏*/}

//修改-大图预览框

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的公共方法，可参考我这个博客https://www.cnblogs.com/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;

},