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