element照片墙使用

<template>
    <span>
        <div v-if="!imgIsIf" style="text-align: center;">
            暂无照片
        </div>
        <div v-if="imgIsIf">
            <el-upload
            :action="url"
            list-type="picture-card"
            :headers="{ token: auth }"
            :data="{ type: 2}"
            multiple
            :disabled="true"
            :auto-upload="false"
            :file-list="imgFiles"
            :on-remove="handleRemoveFile"
            :on-change="handleUpload"
            :accept="'.gif,.jpg,.jpeg,.png,.GIF,.JPG,.PNG'"
            :on-preview="handlePictureCardPreview"
            ref="uploadImg" >
            <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </div>
    </span>
</template>

<script>
import {$http} from "@/api/http.js"
import axios from "axios";
import { Notification } from "element-ui";
import {getImgData_Api} from "@/api/photosDataApi"
let filesListImg=[];
export default {
    props:["fileImgState","uuid"],
    data(){
        return{
            backward_host:"",
            auth:"",
            imgFiles:[],
            isShow:true,
            needUploadFileCount:0,
            uploadedFileCount: 0,
            needDeleteFileList: [],
            uploadFileinfo:[],
            dialogVisible: false,
            dialogImageUrl: '',
            url:"",
            _type_:"",
            imgIsIf:true,
        }
    },
    mounted() {
        let that=this;
        debugger;
        this.auth = window.localStorage.getItem("auth");
        this.url = window.localStorage.getItem("developmentBaseURL") +"api/file/upload";//获取文件信息地址
        $http({
            method:getImgData_Api,
            data:{
                    "currentPage": 1,
                    "pageSize": 5000,
                    "projectid": this.$store.state.project.currentProject.id,
                    "puuid": this.uuid
                },
            success: (res) => {
                debugger;
                that.uploadFileinfo = res.result;//获取到文照片信息的list，主要存储照片附带的各种信息
                if(that.uploadFileinfo.length>0){
                    that.imgIsIf = true;//有误照片的提醒
                }else{
                    that.imgIsIf = false;
                }
                if (that.fileImgState == "edit") {//照片编辑
                    that.isShow = true;
                    that.initArticleData();
                }else if(that.fileImgState == "view"){//查看禁用编辑
                    that.isShow = true;
                    that.initArticleData();//调用方法回显照片
                }else{
                    that.isShow = true;
                }
            }
        })
    },
    methods:{
        handleRemoveFile(file, fileList) {
            if (file.status === "success") {
                let idx = this.imgFiles.findIndex((item) => item.name === file.name);
                this.needDeleteFileList.push(this.imgFiles[idx].fileId);//点击删除时会把删除的图片信息先存储起来，不立刻删除
            } else if (file.status === "ready") {
                this.imgFiles = fileList;
                this.needUploadFileCount--;
            }
        },
        handleSubmit() {
            let that=this;
            if (this.needUploadFileCount) {
                this.$refs.uploadImg.submit();
            } else {
                this.handleSubmitArticle();
            }
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleUpload(file, fileList) {//多个照片上传，element会拆分成一个一个照片上传，都会进入这个环节
            let that= this;
            let testmsg = /^image\/(jpeg|png|jpg)$/.test(file.raw.type)
            if (!testmsg) {
                this.$message.error('上传图片格式不对!')
                return false
            }else{
            if (file.status == "ready") { //准备阶段键上传的文件存储起来，以便后面保存时才进行实际意义的上传入库
                that.needUploadFileCount++;
                that.imgFiles.push(file);
            }
            if (file.status == "success") {//上传结束的回调
                let resResponse = file.response.data;
                if (resResponse) {
                    file.fileId= resResponse.id;
                    that.uploadedFileCount++;
                } else {//这里是进行了上传失败的提醒
                    this.$notify.warning({
                    title: "错误",
                    message:  "文件上传失败",
                    });
                }
                if (that.uploadedFileCount === that.needUploadFileCount) {//
                    that.uploadedFileCount = 0;
                    that.needUploadFileCount = 0;
                    that.imgFiles = [...that.imgFiles];
                    filesListImg = [];
                    that.handleSubmitArticle();
                }
            }
            }
        },
        handleSubmitArticle(){
            const uploadFilePath = JSON.stringify(
                this.imgFiles
                .map((file) => file.fileId)
                .filter((id) => {
                    let noRepeat = true;
                    this.needDeleteFileList.forEach((el) => {
                    if (el == id) noRepeat = false;
                    });
                    return noRepeat;
                })
            );
            if(this.fileImgState == "edit"){
                this.deleteFiles(() => {
                    this.$emit("getUploadFile",{type:2,value:uploadFilePath});
                })
            }else{
                this.$emit("getUploadFile",{type:2,value:uploadFilePath});
            }
        },
        initArticleData() {//遍历查询到的文件信息，通过文件的uuid查询照片文件流
            let that = this;
            let files_;
            if(this.uploadFileinfo&&this.uploadFileinfo!=""&&this.uploadFileinfo!=undefined&&this.uploadFileinfo!=null){
                files_ =  this.uploadFileinfo;
            }else{
                files_ =  [];
            }
            let isSended = false;
            files_.forEach((item) => {
            axios({
                method: 'get',
                url:window.localStorage.getItem("developmentBaseURL")+"/api/multimedia-data/getFile/"+item.uuid,
                headers: {
                    "token": window.localStorage.getItem("auth"),
                },
                responseType: 'blob',
            }).then(response => {//解析文件流，生成照片
            //    let type_ =item.fileSuffix;
                // if (type_ == "docx") {
                //     that._type_ = "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                // } else if (type_ == "doc") {
                //     that._type_ = "application/msword"
                // } else if (type_ == "gif") {
                //     that._type_ = "image/gif"
                // } else if (type_ == "jpeg" || type_ == "jpg") {
                //     that._type_ = "image/jpeg"
                // } else if (type_ == "png") {
                    that._type_ = "image/png"
                // } else if (type_ == "pdf") {
                //     that._type_ = "application/pdf"
                // } else if (type_ == "txt") {
                //     that._type_ = "text/plain;charset=utf-8'"
                // } else if (type_ == "xls") {
                //     that._type_ = "application/vnd.ms-excel" 
                // } else if (type_ == "xlsx") {
                //     that._type_ = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                // }else if (type_ == "zip") {
                //     that._type_ = "application/zip"
                // } else if (type_ == "ppt") {
                //     that._type_ = "application/vnd.ms-powerpoint"
                // } else if (type_ == "pptx") {
                //     that._type_ = "application/vnd.openxmlformats-officedocument.presentationml.presentation"
                // }
                var blob = new Blob([response.data], { type: that._type_ })
                var href = window.URL.createObjectURL(blob); //创建下载的链接
                that.imgFiles.push({//照片墙的回显格式
                    name: item.name+".png",
                    fileId: item.uuid,
                    path:item.path,
                    url:href,
                    type: item.type
                });
                
            }).catch(function (err) {
            });     
            });
        },
        deleteFiles(callback) {//文件删除，当删除照片的时候不点击保存就不会调用这个方法，页面的删除类似于假删除，会把删除的文件id存储起来，当点击保存的时候才开始进行实际意义的删除
            if (this.needDeleteFileList.length > 0) {
                $http({
                   method:fileDelete_Api,
                     data:{ids:this.needDeleteFileList.toString()},
                    success:(res)=>{
                         callback();
                     }
                }) 
             } else {
                 callback();
             }
         },
    }
}
</script>

<style>

</style>

 以上方法每一步都有详细的解释，值得注意的是，我在上传删除照片的时候，都进行了假删除（没有进行请求操作），只有在当前页面保存的时候，才会进行真正意义的删除（请求后端接口）。