From fc902d4ba26ebebf2de18ead235aaafa37f44fcc Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期四, 16 五月 2024 16:49:36 +0800
Subject: [PATCH] 学习文件
---
src/components/UploadC.vue | 28 ++++++++++++++++++++++++----
1 files changed, 24 insertions(+), 4 deletions(-)
diff --git a/src/components/UploadC.vue b/src/components/UploadC.vue
index 5367c15..4460f59 100644
--- a/src/components/UploadC.vue
+++ b/src/components/UploadC.vue
@@ -5,12 +5,17 @@
:show-file-list="true"
:limit="uploadNum"
multiple
+ :file-list="fileUrl"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:on-success="handleUploadSuccess"
:before-upload="beforeUpload">
<el-button size="small" type="primary">鐐瑰嚮涓婁紶</el-button>
<div slot="tip" class="el-upload__tip">鍙兘涓婁紶pdf銆乵p4銆乵p3銆乸ng銆乯pg銆乯pge鏂囦欢锛屼笖涓嶈秴杩噞{fileSizeLimitM}}M</div>
+ <div v-if="fileUrl && fileUrl.length > 0 && uploadNum === 1">
+ <video class="returnShow" v-if="fileType === 'video'" :src="'/api/files/' + fileUrl[0].url"></video>
+ <img class="returnShow" v-if="fileType === 'img'" :src="'/api/files/' + fileUrl[0].url"/>
+ </div>
</el-upload>
</div>
</template>
@@ -24,31 +29,42 @@
default: 1,
type: Number
},
+ fileType: {
+ required: false,
+ type: String
+ },
fileSizeLimitM: {
required: false,
default: 1,
type: Number
+ },
+ fileUrl: {
+ required: true,
+ default: [],
+ type: Array
}
},
data() {
return {
uploadUrl: "http://localhost:8085/api/upload/upload",
- fileUrl: "",
}
},
methods: {
+ clearFile() {
+ this.fileUrl = []
+ },
beforeRemove(file, fileList) {
return this.$confirm(`纭畾绉婚櫎 ${ file.name }锛焋);
},
handleRemove(file, fileList) {
- console.log(file, fileList);
+ this.$emit('removeFile', this.fileUrl, file.name);
},
handleUploadSuccess(res, file) {
- this.$emit('getUploadUrl', file.response);
+ this.fileUrl.push(res.response)
+ this.$emit('getUploadUrl', this.fileUrl);
},
beforeUpload(file) {
const limit = file.size / 1024 / 1024 < this.fileSizeLimitM;
-
if (!limit) {
this.$message.error(`涓婁紶鏂囦欢澶у皬涓嶈兘瓒呰繃 ${this.fileSizeLimitM}MB!`);
}
@@ -59,6 +75,10 @@
</script>
<style scoped>
+.returnShow {
+ width: 300px;
+ height: 200px;
+}
.avatar-uploader {
text-align: center;
width: 100%
--
Gitblit v1.8.0