From 18b05b40f7b62962e05250e6a07abca27b5adf67 Mon Sep 17 00:00:00 2001
From: nidapeng <jp@doumee.com>
Date: 星期一, 01 四月 2024 15:02:24 +0800
Subject: [PATCH] 提交一把
---
company/src/components/common/UploadFile.vue | 48 ++++++++++++++++++++++++++++++++----------------
1 files changed, 32 insertions(+), 16 deletions(-)
diff --git a/company/src/components/common/UploadFile.vue b/company/src/components/common/UploadFile.vue
index 0ceb06f..9218330 100644
--- a/company/src/components/common/UploadFile.vue
+++ b/company/src/components/common/UploadFile.vue
@@ -1,17 +1,19 @@
<template>
<div>
<el-upload
+ ref="uploadFileBtn"
class="upload-demo"
:accept="uploadData.fileTyp"
:action="uploadImgUrl"
:limit="1"
+ :before-remove="removes"
:on-exceed="handleExceed"
:on-success="handleFileSuccess"
:on-error="uploadError"
:before-upload="beforeFileUpload"
:file-list="fileList">
- <el-button size="small" type="primary">鐐瑰嚮涓婁紶</el-button>
- <div slot="tip" class="el-upload__tip">鍙兘涓婁紶{{ uploadData.fileType }}鏂囦欢锛屼笖涓嶈秴杩�5mb</div>
+ <el-button size="small" type="primary" >鐐瑰嚮涓婁紶</el-button>
+ <div style="display: inline-block" slot="tip" class="el-upload__tip">(鍙兘涓婁紶{{ uploadData.fileType }}鏂囦欢锛屼笖涓嶈秴杩�5mb)</div>
</el-upload>
</div>
@@ -20,6 +22,10 @@
<script>
export default {
props: {
+ fileList:{
+ type: Array,
+ default: () => []
+ },
file: {
type: Object,
default: () => {}
@@ -27,37 +33,50 @@
tipsLabel: '',
customStyle: {
type: String,
- default: 'width: 190px; height: 190px;'
+ default: 'width: 190px; height: 190px;'
},
uploadData: Object
},
data() {
return {
- fileList:null,
+ // fileList:[],
uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/public/upload?folder='+this.uploadData.folder
}
},
-
+ watch: {
+ fileList (nv,ov) {
+ if(this.fileList ==null){
+ this.fileList = new Array();
+ }
+ // alert(this.fileList)
+ }
+ },
methods: {
+ removes() {
+ this.$emit('remove')
+ },
// 涓婁紶鍥剧墖
- handleExceed(){},
+ handleExceed(){
+ this.$message.error('鍙厑璁镐笂浼�1涓枃浠讹紝璇峰垹闄ゅ凡浼犳枃浠讹紝閲嶈瘯锛�')
+ },
handleFileSuccess(res, file) {
if (res.code == 200) {
let { data } = res
// this.fileList = [{name: data.originname, url: data.url }]
this.$message.success('涓婁紶鎴愬姛')
- this.$emit('uploadSuccess', { fileurl: data.imgaddr, fileurlFull: data.url, name: data.originname })
+ this.$emit('uploadSuccess', { fileurl: data.imgaddr, fileurlFull: data.url, name: data.originname })
} else {
- this.$tip.apiFailed('涓婁紶澶辫触')
+ this.$message.apiFailed('涓婁紶澶辫触')
}
this.$emit('uploadEnd')
},
uploadError() {
- this.$tip.apiFailed('涓婁紶澶辫触')
+ this.$message.apiFailed('涓婁紶澶辫触')
this.$emit('endUpload')
},
// // 鎷︽埅
beforeFileUpload(file) {
+
this.$emit('uploadBegin')
return true
}
@@ -77,7 +96,7 @@
cursor: pointer;
position: relative;
width: $image-width;
- height: $image-width;
+ height: auto;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
@@ -110,17 +129,14 @@
height: 90px !important;
}
::v-deep .el-upload-list__item {
- width: 90px !important;
- height: 90px !important;
+ width: 80% !important;
+ height: 50px !important;
}
.icon {
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(0%, -85%);
}
-::v-deep .el-upload-list__item {
- width: 90px !important;
- height: 90px !important;
-}
+
</style>
--
Gitblit v1.9.3