elementUI 上傳多張圖片並預覽大圖左右切換

前段時間項目需求中涉及到上傳多張圖片 當條信息查看時可預覽大圖功能，項目框架vue.js+elementUI,抽時間在此做個整理記錄，如有更好的方法 歡迎大家互相交流

頁面列表更多操作-修改-先選擇圖片 點擊確定時上傳所有，查看-點擊圖片 就是查看圖片大圖

上傳多張圖片： el-upload組件

查看-大圖預覽左右切換：el-image組件

開發查看-大圖預覽時 發現個問題:用的組件頁面沒有效果，經排查是因為之前項目引的elementUI js css版本過舊 沒有包含el-image組件，大家開發時候注意下

效果圖如下：

 

 

 直接貼代碼如下：

里面有一些是項目的公共方法就不細寫了，大家可參考圖片上傳代碼的思路和步驟，具體請以自己的項目為准

// css 圖片個數夠5張時 上傳按鈕框隱藏
.disUoloadSty .el-upload--picture-card{
    display:none;   /* 上傳按鈕隱藏 */
}

<div class="width100Precent">
                            <div class="uploadIMG uploadSty"  v-if="dialogTitle!=='查看'">
                                <el-upload
                                    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}"
                                   >
                                    <i slot="default" class="el-icon-plus"></i>
                                </el-upload>
                                <p>注：最多上傳5張圖片</p>
                            </div>
                            <div class="uploadIMG uploadSty"  v-if="dialogTitle=='查看'" >
　　　　　　　　　　　　　　　　　　　//查看時 用的elementUI el-image組件 具體用法可查看elementUI官網
                                <div class="demo-image__preview">
                                    <el-image v-if="previewList.length==0">
                                        <div slot="error" class="image-slot">
                                            <i class="el-icon-picture-outline"></i>
                                        </div>
                                    </el-image>
                                    <el-image v-else class="elImageSty" v-for="(item,index) in previewList" :src="item"  :key="index" fit="contain" lazy :preview-src-list="getPreviewImgList(index)"></el-image>
                                </div>
                            </div>
                        </div>

//修改-大圖預覽框

　　<el-dialog :visible.sync="dialogImgVisible" title="圖片">

    　　<img width="100%" :src="dialogImageUrl" alt="">

　　</el-dialog>

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 = this
                let fd = new FormData()
                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.html
　　　　　　　　　 for(key in removeNullStr(_this.form)){
                    fd.append(key,_this.form[key])
                }
　　　　　　　　　 return fd;
            },
 // 提交表單
            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 還是已經存在的圖片url if(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 = this
                let 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(var item 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);
                    }
                }
                return arr;
            },