<!--
|
* @Author: zxq
|
* @Date: 2022-01-05 18:44:53
|
* @LastEditors: zhaoxiaoqiang 287285524@qq.com
|
* @LastEditTime: 2023-08-24 14:39:04
|
* @Description: Description
|
* @FilePath: \qyp_finlean_plat\src\components\upload.vue
|
-->
|
<template>
|
<div style="width: 100%">
|
<el-upload
|
action="#"
|
:limit="limit"
|
multiple
|
class="upload-demo"
|
:list-type="!isUploadOther?'picture-card':''"
|
:disabled="disabled"
|
:on-exceed="masterFileMax"
|
:before-upload="beforeAvatarUpload"
|
:http-request="uploadFileData"
|
:file-list="PicList"
|
:class="[uploadDisabled ? 'updispaly' : '']"
|
>
|
<el-button v-if="isUploadOther" size="small" icon="el-icon-plus" type="primary" >点击上传</el-button>
|
<i v-else slot="default" class="el-icon-plus"></i>
|
<div slot="file" slot-scope="{ file }">
|
<template v-if="isUploadOther">
|
<div class="pdf_style" v-if='file.url'>
|
<template
|
v-if="
|
file.url
|
.substring(file.url.lastIndexOf('.'))
|
.split('.')[1]
|
.trim() != 'pdf'
|
"
|
>
|
<div :style="imgStyle" class="img_box">
|
<img
|
class="el-upload-list__item-thumbnail"
|
:style="imgStyle"
|
:src="file.url"
|
alt=""
|
/>
|
<div class="el-upload-list__item-actions" :style="imgStyle">
|
<span class="el-upload-list__item-preview">
|
<i
|
class="el-icon-zoom-in"
|
style="color: #fff; font-size: 20px"
|
@click="handlePictureCardPreview(file)"
|
></i>
|
<i
|
class="el-icon-delete"
|
style="color: #fff; font-size: 20px"
|
@click="handleRemoveLoanT(file)"
|
></i>
|
</span>
|
</div>
|
</div>
|
</template>
|
<template v-else>
|
<div class="pdf_box">
|
<span>{{ file.fileName }}</span>
|
<i
|
class="el-icon-delete delete_file"
|
style="color: #fff; font-size: 20px"
|
@click="handleRemoveLoanT(file)"
|
></i>
|
</div>
|
</template>
|
</div>
|
</template>
|
<template v-else>
|
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
|
<span class="el-upload-list__item-actions">
|
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
|
<i class="el-icon-zoom-in"></i>
|
</span>
|
<span v-if='!disabled' class="el-upload-list__item-delete" @click="handleRemoveLoanT(file)">
|
<i class="el-icon-delete"></i>
|
</span>
|
</span>
|
</template>
|
</div>
|
</el-upload>
|
<el-dialog
|
title="查看图片"
|
:append-to-body="true"
|
top="0"
|
:visible.sync="imgVisible"
|
class="dialogImageUrlbox"
|
>
|
<img width="100%" :src="dialogImageUrl" alt="" />
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import axios from "axios";
|
import { uploadFile } from "@/api/user";
|
import { imgShrink } from "@/utils/validate";
|
import {showTipOfStatuCode} from '@/utils/statusCodeManage'
|
export default {
|
props: {
|
limit: {
|
type: Number | String,
|
default: "",
|
},
|
disabled: {
|
type: Boolean,
|
default: false,
|
},
|
defaultList: {
|
type: Array,
|
default: () => {
|
return [];
|
},
|
},
|
imgSize: {
|
type: Object,
|
default: () => {
|
return {};
|
},
|
},
|
imgStyle: {
|
type: Object,
|
default: () => {
|
return {
|
width: "100px",
|
height: "100px",
|
};
|
},
|
},
|
isUploadOther: {
|
type: Boolean,
|
default: false,
|
},
|
},
|
data() {
|
return {
|
PicList: [],
|
imgVisible: false,
|
dialogImageUrl: "",
|
uploadFileForm: {
|
suffix: "",
|
base64Data: "",
|
},
|
uploadDisabled: false,
|
};
|
},
|
watch: {
|
defaultList: {
|
handler: function (val) {
|
this.PicList = val;
|
},
|
deep: true,
|
},
|
},
|
methods: {
|
beforeAvatarUpload(file, type) {
|
var testmsg = !/\/(?:jpg|jpeg|png|pdf)/i.test(file.type);
|
const isLt5M = file.size / 1024 / 1024 < 100;
|
if (testmsg) {
|
this.$message.error("请检查文件格式");
|
return false;
|
}
|
if (!isLt5M) {
|
this.$message.error("上传图片大小不能超过 100MB!");
|
return false;
|
}
|
},
|
uploadFileData(file, type) {
|
if(this.isUploadOther){
|
var formData = new FormData(); //新建表单对象
|
formData.append("file", file.file); //把文件对象添加到表单对象里
|
formData.append("filename", file.file.name); //把文件名称添加到表单对象里
|
axios.post("/sfPlat/pub/uploadLargeFile", formData).then(({ data }) => {
|
let { fileUrl, fileName, fileId } = data.body;
|
this.PicList.push({
|
fileUrl: fileUrl,
|
fileName,
|
url: fileUrl,
|
fileId,
|
});
|
this.$emit("sendList", this.PicList);
|
})
|
.catch((err) => {
|
showTipOfStatuCode(err)
|
});
|
}else{
|
//上传图片
|
const fileName = file.file.name;
|
this.uploadFileForm.suffix = fileName.substr(fileName.lastIndexOf(".") + 1, fileName.length);
|
imgShrink(file.file,this.imgSize.width,this.imgSize.height).then(resBase64 => {
|
this.uploadFileForm.base64Data = resBase64.split(",")[1];
|
//直接拿到base64信息
|
uploadFile(this.uploadFileForm).then(res => {
|
this.PicList.push({
|
filePath: res.body.fileUrl,
|
fileName: fileName,
|
url: res.body.fileUrl,
|
fileId: res.body.fileId
|
});
|
this.uploadDisabled = this.PicList.length >= 1 && this.limit==1
|
this.$emit('sendList', this.PicList);
|
});
|
});
|
}
|
},
|
handlePictureCardPreview(file) {
|
this.dialogImageUrl = file.url;
|
this.imgVisible = true;
|
},
|
handleRemoveLoanT(file) {
|
const index = this.PicList.findIndex((item) => {
|
return item.fileId == file.fileId;
|
});
|
this.PicList.splice(index, 1);
|
this.uploadDisabled = this.PicList.length >= 1 && this.limit == 1;
|
this.$emit("sendList", this.PicList);
|
},
|
masterFileMax() {
|
this.$message.warning(`最多上传 ${this.limit} 个文件。`);
|
},
|
},
|
created() {},
|
mounted() {
|
if (this.defaultList.length > 0) {
|
this.PicList = this.defaultList;
|
this.uploadDisabled = this.PicList.length >= 1 && this.limit == 1;
|
}
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
.updispaly {
|
.el-upload--picture-card {
|
display: none;
|
}
|
.el-upload {
|
width: 100% !important;
|
height: 100% !important;
|
}
|
.uplaod_img > .el-upload--picture-card {
|
width: 100% !important;
|
height: 100% !important;
|
}
|
}
|
.pdf_style{
|
.img_box {
|
position: relative;
|
margin-right: 5px;
|
margin-bottom: 5px;
|
}
|
.el-upload-list__item {
|
width: inherit !important;
|
}
|
.el-upload-list__item-actions {
|
position: absolute !important;
|
top: 0 !important;
|
left: 0;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
opacity: 0;
|
background: rgba(0, 0, 0, 0.5);
|
}
|
|
.img_box:hover .el-upload-list__item-actions {
|
opacity: 1;
|
}
|
.el-upload-list {
|
display: flex !important;
|
justify-content: flex-start !important;
|
align-items: center !important;
|
flex-wrap: wrap !important;
|
}
|
.pdf_box {
|
padding: 5px 0;
|
padding-right: 24px;
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
}
|
.delete_file {
|
display: inline-block;
|
margin-left: 12px;
|
opacity: 0;
|
}
|
.pdf_box:hover .delete_file {
|
opacity: 1;
|
color: #666 !important;
|
}
|
}
|
|
</style>
|
