<!--
|
* @Author: zxq
|
* @Date: 2022-01-05 18:44:53
|
* @LastEditors: zhaoxiaoqiang 287285524@qq.com
|
* @LastEditTime: 2023-08-31 14:56:53
|
* @Description: Description
|
* @FilePath: \sjzl-plat\src\components\upload.vue
|
-->
|
<template>
|
<div>
|
<el-upload
|
action="#"
|
:limit='limit'
|
multiple
|
:disabled='disabled'
|
list-type="picture-card"
|
:on-exceed="masterFileMax"
|
:before-upload="beforeAvatarUpload"
|
:http-request="uploadFileData"
|
:file-list="pictureList"
|
>
|
<i slot="default" class="el-icon-plus"></i>
|
<div slot="file" slot-scope="{ file }">
|
<!-- <span>{{ file.url }}</span> -->
|
<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>
|
</div>
|
</el-upload>
|
<el-dialog title="查看图片" top="1vh" :append-to-body='true' :visible.sync="imgVisible" class='dialogImageUrlbox'>
|
<img width="80%" :src="dialogImageUrl" alt="" />
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { uploadFile } from "@/api/user";
|
import { imgShrink } from "@/utils/validate";
|
|
export default {
|
props:{
|
limit: {
|
type: Number,
|
default: 1
|
},
|
disabled: {
|
type: Boolean,
|
default: false
|
},
|
defaultList:{
|
type: Array,
|
default: ()=>{
|
return []
|
}
|
},
|
isProject:{
|
type: Boolean,
|
default: false
|
}
|
},
|
data() {
|
return {
|
pictureList:[],
|
imgVisible:false,
|
dialogImageUrl:'',
|
uploadFileForm:{
|
suffix:"",
|
base64Data:""
|
}
|
};
|
},
|
watch:{
|
defaultList:{
|
handler: function(val) {
|
console.log(val)
|
this.pictureList = val;
|
},
|
deep: true
|
}
|
},
|
methods: {
|
beforeAvatarUpload(file,type) {
|
var testmsg = /^image\/(jpeg|png|jpg)$/.test(file.type);
|
const isLt5M = file.size / 1024 / 1024 < 15;
|
if (!testmsg) {
|
this.$message.error("上传图片格式不对!");
|
return false;
|
}
|
if (!isLt5M) {
|
this.$message.error("上传图片大小不能超过 15MB!");
|
return false;
|
}
|
},
|
uploadFileData(file,type) {
|
//上传图片
|
const fileName = file.file.name;
|
this.uploadFileForm.suffix = fileName.substr( fileName.lastIndexOf(".") + 1,fileName.length);
|
imgShrink(file.file).then(resBase64 => {
|
this.uploadFileForm.base64Data = resBase64.split(",")[1];
|
let apiEvent = {uploadFile};
|
//直接拿到base64信息
|
apiEvent["uploadFile"](this.uploadFileForm).then(res => {
|
this.pictureList.push({
|
filePath: res.body.fileUrl,
|
fileName: fileName,
|
uid: file.file.uid,
|
url: res.body.fileUrl,
|
fileId:res.body.fileId
|
});
|
this.$emit('sendList',this.pictureList);
|
});
|
});
|
},
|
handlePictureCardPreview(file) {
|
this.dialogImageUrl = file.url;
|
this.imgVisible = true;
|
},
|
handleRemoveLoanT(file) {
|
const index = this.pictureList.findIndex(item => {
|
return item.uid == file.uid;
|
});
|
this.pictureList.splice(index,1);
|
this.$emit('sendList',this.pictureList);
|
},
|
masterFileMax(){
|
this.$message.warning(`请最多上传 ${this.limit} 个文件。`);
|
}
|
},
|
mounted() {
|
if (this.defaultList.length > 0) {
|
this.pictureList = this.defaultList;
|
this.uploadDisabled = this.pictureList.length >= 1 && this.limit == 1;
|
}
|
},
|
};
|
</script>
|
|
<style>
|
.el-upload--picture-card , .el-upload-list__item{
|
width: 74px !important;
|
height: 74px !important;
|
line-height: 76px !important;
|
}
|
|
</style>
|
