From 7829e0f0c41ff0961450ebb1bd06b1bc14cc6860 Mon Sep 17 00:00:00 2001
From: yoyo0926 <398927951@qq.com>
Date: Wed, 12 Apr 2023 14:03:39 +0800
Subject: [PATCH 1/2] feat: update upload-file component

---
 src/components/scUpload/file.vue | 18 ++++++++++--
 src/utils/tool.js                | 16 +++++++++++
 src/views/vab/upload.vue         | 47 +++++++++++++++++++++++++++++++-
 3 files changed, 78 insertions(+), 3 deletions(-)

diff --git a/src/components/scUpload/file.vue b/src/components/scUpload/file.vue
index bbb907e..9643e47 100644
--- a/src/components/scUpload/file.vue
+++ b/src/components/scUpload/file.vue
@@ -1,6 +1,7 @@
 <template>
 	<div class="sc-upload-file">
 		<el-upload
+			ref="uploadFileRef"
 			:disabled="disabled"
 			:auto-upload="autoUpload"
 			:action="action"
@@ -31,6 +32,7 @@
 
 <script>
 	import config from "@/config/upload"
+	import tool from '@/utils/tool'
 
 	export default {
 		props: {
@@ -48,7 +50,8 @@
 			drag: { type: Boolean, default: false },
 			multiple: { type: Boolean, default: true },
 			disabled: { type: Boolean, default: false },
-			onSuccess: { type: Function, default: () => { return true } }
+			onSuccess: { type: Function, default: () => { return true } },
+			onError: { type: Function, default: () => { return true } }
 		},
 		data() {
 			return {
@@ -133,6 +136,10 @@
 				file.url = response.src
 			},
 			error(err){
+				var os = this.onError(err)
+				if(os!=undefined && os==false){
+					return false
+				}
 				this.$notify.error({
 					title: '上传文件未成功',
 					message: err
@@ -153,10 +160,17 @@
 			handlePreview(uploadFile){
 				window.open(uploadFile.url)
 			},
+			submit() {
+				// 手动调用上传
+				this.$refs.uploadFileRef.submit()
+			},
 			request(param){
 				var apiObj = config.apiObjFile;
+				// if(this.apiObj){
+				// 	apiObj = this.apiObj;
+				// }
 				if(this.apiObj){
-					apiObj = this.apiObj;
+					apiObj = tool.array.cloneExistKey(config.apiObjFile, this.apiObj);
 				}
 				const data = new FormData();
 				data.append(param.filename, param.file);
diff --git a/src/utils/tool.js b/src/utils/tool.js
index 8c027db..1631fcf 100644
--- a/src/utils/tool.js
+++ b/src/utils/tool.js
@@ -218,4 +218,20 @@ tool.crypto = {
 	}
 }
 
+tool.array = {
+	/**
+	 * 将资源对象中的key名与目标对象一致的key值，赋值进去，不改标目标对象的对象结构
+	 * @param target 目标对象
+	 * @param source 资源对象
+	 */
+	cloneExistKey(target, source) {
+		Object.keys(target).forEach((key) => {
+			if(source[key]) {
+				target[key] = source[key]
+			}
+		});
+		return target
+	}
+}
+
 export default tool
diff --git a/src/views/vab/upload.vue b/src/views/vab/upload.vue
index f2bd2f0..9f0f227 100644
--- a/src/views/vab/upload.vue
+++ b/src/views/vab/upload.vue
@@ -6,12 +6,32 @@
 			</sc-upload-file>
 		</el-card>
 
-		<el-card shadow="never" header="文件示例(值为对象数组,适合保存原始文件名)">
+		<el-card shadow="never" header="文件示例1(值为对象数组,适合保存原始文件名)">
 			<sc-upload-file v-model="fileurlArr" :limit="3" tip="最多上传3个文件,单个文件不要超过10M,请上传xlsx/docx格式文件">
 				<el-button type="primary" icon="el-icon-upload">上传附件</el-button>
 			</sc-upload-file>
 		</el-card>
 
+		<el-card shadow="never" header="文件示例2(手动上传+自定义参数，非选择文件后自动上传，支持success，error回调)">
+			<el-row :gutter="20">
+				<el-col :span="8">
+					<el-input v-model="fileurlArr2Params.name"></el-input>
+				</el-col>
+				<el-col :span="12">
+					<sc-upload-file v-model="fileurlArr2" :data="fileurlArr2Params" :autoUpload="false" :limit="3" :onSuccess="onUploadSuccess" :onError="onUploadError" tip="最多上传3个文件,单个文件不要超过10M,仅支持上传docx格式文件" accept=".docx" ref="uploadFileRef" >
+						<el-button type="primary" icon="el-icon-upload">上传附件</el-button>
+					</sc-upload-file>
+				</el-col>
+			</el-row>
+			<el-button type="primary" @click="submitUpload2">提交</el-button>
+		</el-card>
+
+		<el-card shadow="never" header="文件示例3(自定义API地址和文件name名称)">
+			<sc-upload-file v-model="fileurlArr2" :limit="3" :apiObj="fileurlArr2UploadObj" :onSuccess="onUploadSuccess" :onError="onUploadError" tip="最多上传3个文件,单个文件不要超过10M,仅支持上传docx格式文件" accept=".docx" ref="uploadFileRef" >
+				<el-button type="primary" icon="el-icon-upload">上传附件</el-button>
+			</sc-upload-file>
+		</el-card>
+
 		<el-card shadow="never" header="图片卡片示例(已开启拖拽排序)">
 			<sc-upload-multiple v-model="fileurl2" draggable :limit="3" tip="最多上传3个文件,单个文件不要超过10M,请上传图像格式文件"></sc-upload-multiple>
 		</el-card>
@@ -85,6 +105,14 @@
 						url: 'http://www.scuiadmin.com/files/350000201004261875.xlsx',
 					}
 				],
+				fileurlArr2: [],
+				fileurlArr2Params: {
+					name: '张三'
+				},
+				fileurlArr2UploadObj: {
+					url: this.$API.demo.ver.url,
+					name: '自定义上传地址'
+				},
 				fileurl: "http://www.scuiadmin.com/files/220000198611262243.xlsx,http://www.scuiadmin.com/files/350000201004261875.xlsx",
 				fileurl2: "img/auth_banner.jpg,img/avatar3.gif",
 				fileurl3: "img/auth_banner.jpg",
@@ -139,6 +167,23 @@
 			},
 			resetForm(){
 				this.$refs.ruleForm.resetFields();
+			},
+			submitUpload2() {
+				this.$refs.uploadFileRef.submit();
+			},
+			onUploadSuccess(res, file) {
+				this.$alert(`success函数钩子，回调参数打开控制台查看`, {
+					title: "提示",
+					type: "success"
+				})
+				console.log(res, file)
+			},
+			onUploadError(res) {
+				this.$alert(`error函数钩子，回调参数打开控制台查看`, {
+					title: "提示",
+					type: "error"
+				})
+				console.log(res)
 			}
 		}
 	}
-- 
Gitee


From 332c62d8821e42f9363b0a946dfbab1d28cc2dc0 Mon Sep 17 00:00:00 2001
From: yoyo0926 <398927951@qq.com>
Date: Thu, 13 Jul 2023 13:30:30 +0800
Subject: [PATCH 2/2] feat: update upload more use

---
 src/views/vab/upload.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/views/vab/upload.vue b/src/views/vab/upload.vue
index 9f0f227..84547be 100644
--- a/src/views/vab/upload.vue
+++ b/src/views/vab/upload.vue
@@ -18,7 +18,7 @@
 					<el-input v-model="fileurlArr2Params.name"></el-input>
 				</el-col>
 				<el-col :span="12">
-					<sc-upload-file v-model="fileurlArr2" :data="fileurlArr2Params" :autoUpload="false" :limit="3" :onSuccess="onUploadSuccess" :onError="onUploadError" tip="最多上传3个文件,单个文件不要超过10M,仅支持上传docx格式文件" accept=".docx" ref="uploadFileRef" >
+					<sc-upload-file v-model="fileurlArr2" :data="fileurlArr2Params" :autoUpload="false" :limit="3" :onSuccess="onUploadSuccess" :onError="onUploadError" tip="最多上传3个文件,单个文件不要超过10M,仅支持上传docx格式文件" accept=".docx" ref="uploadFileRef2" >
 						<el-button type="primary" icon="el-icon-upload">上传附件</el-button>
 					</sc-upload-file>
 				</el-col>
@@ -27,9 +27,10 @@
 		</el-card>
 
 		<el-card shadow="never" header="文件示例3(自定义API地址和文件name名称)">
-			<sc-upload-file v-model="fileurlArr2" :limit="3" :apiObj="fileurlArr2UploadObj" :onSuccess="onUploadSuccess" :onError="onUploadError" tip="最多上传3个文件,单个文件不要超过10M,仅支持上传docx格式文件" accept=".docx" ref="uploadFileRef" >
+			<sc-upload-file v-model="fileurlArr2" :limit="3" name="contractFile" :apiObj="fileurlArr2UploadObj" :onSuccess="onUploadSuccess" :onError="onUploadError" tip="最多上传3个文件,单个文件不要超过10M,仅支持上传docx格式文件" accept=".docx" ref="uploadFileRef3" >
 				<el-button type="primary" icon="el-icon-upload">上传附件</el-button>
 			</sc-upload-file>
+			<p style="color: red">控制台的报错，可以忽略，由于返回的数据结构未按统一的上传格式，实际应用中调整一下返回数据结构即可</p>
 		</el-card>
 
 		<el-card shadow="never" header="图片卡片示例(已开启拖拽排序)">
@@ -169,10 +170,12 @@
 				this.$refs.ruleForm.resetFields();
 			},
 			submitUpload2() {
-				this.$refs.uploadFileRef.submit();
+				// 手动调用上传
+				this.$refs.uploadFileRef2.submit();
 			},
 			onUploadSuccess(res, file) {
-				this.$alert(`success函数钩子，回调参数打开控制台查看`, {
+				// 上传完成后的回调方法
+				this.$alert(`upload success函数钩子，回调参数打开控制台查看`, {
 					title: "提示",
 					type: "success"
 				})
-- 
Gitee