增加 sc-upload 参数 name&data

src/components/scUpload/file.vue

@@ -1,6 +1,23 @@
 <template>
 	<div class="sc-upload-file">
-		<el-upload :disabled="disabled" :auto-upload="autoUpload" :action="action" :http-request="request" :file-list="defaultFileList" :show-file-list="showFileList" :drag="drag" :accept="accept" :multiple="multiple" :limit="limit" :before-upload="before" :on-success="success" :on-error="error" :on-preview="handlePreview" :on-exceed="handleExceed">
+		<el-upload 
+			:disabled="disabled" 
+			:auto-upload="autoUpload" 
+			:action="action" 
+			:name="name" 
+			:data="data" 
+			:http-request="request" 
+			:file-list="defaultFileList" 
+			:show-file-list="showFileList" 
+			:drag="drag" 
+			:accept="accept" 
+			:multiple="multiple" 
+			:limit="limit" 
+			:before-upload="before" 
+			:on-success="success" 
+			:on-error="error" 
+			:on-preview="handlePreview" 
+			:on-exceed="handleExceed">
 			<slot>
 				<el-button type="primary" :disabled="disabled">Click to upload</el-button>
 			</slot>
@@ -21,6 +38,8 @@
 			tip: { type: String, default: "" },
 			action: { type: String, default: "" },
 			apiObj: { type: Object, default: () => {} },
+			name: { type: String, default: config.filename },
+			data: { type: Object, default: () => {} },
 			accept: { type: String, default: "" },
 			maxSize: { type: Number, default: config.maxSizeFile },
 			limit: { type: Number, default: 0 },
@@ -120,8 +139,10 @@
 					apiObj = this.apiObj;
 				}
 				const data = new FormData();
-				var file = param.file
-				data.append("file", file);
+				data.append(param.filename, param.file);
+				for (const key in param.data) {
+					data.append(key, param.data[key]);
+				}
 				apiObj.post(data, {
 					onUploadProgress: e => {
 						const complete = parseInt(((e.loaded / e.total) * 100) | 0, 10)

src/components/scUpload/index.vue

@@ -23,6 +23,8 @@
 			:disabled="disabled"
 			:show-file-list="showFileList"
 			:action="action"
+			:name="name"
+			:data="data"
 			:accept="accept"
 			:limit="1"
 			:http-request="request"
@@ -30,8 +32,7 @@
 			:before-upload="before"
 			:on-success="success"
 			:on-error="error"
-			:on-exceed="handleExceed"
-		>
+			:on-exceed="handleExceed">
 			<slot>
 				<div class="el-upload--picture-card">
 					<div class="file-empty">
@@ -67,6 +68,8 @@
 			icon: { type: String, default: "el-icon-plus" },
 			action: { type: String, default: "" },
 			apiObj: { type: Object, default: () => {} },
+			name: { type: String, default: config.filename },
+			data: { type: Object, default: () => {} },
 			accept: { type: String, default: "image/gif, image/jpeg, image/png" },
 			maxSize: { type: Number, default: config.maxSizeFile },
 			limit: { type: Number, default: 1 },
@@ -213,8 +216,10 @@
 					apiObj = this.apiObj;
 				}
 				const data = new FormData();
-				var file = param.file
-				data.append("file", file);
+				data.append(param.filename, param.file);
+				for (const key in param.data) {
+					data.append(key, param.data[key]);
+				}
 				apiObj.post(data, {
 					onUploadProgress: e => {
 						const complete = parseInt(((e.loaded / e.total) * 100) | 0, 10)

src/components/scUpload/multiple.vue

@@ -1,6 +1,22 @@
 <template>
 	<div class="sc-upload-multiple">
-		<el-upload ref="uploader" :auto-upload="autoUpload" list-type="picture-card" :disabled="disabled" :action="action" :http-request="request" :file-list="defaultFileList" :show-file-list="showFileList" :accept="accept" :multiple="multiple" :limit="limit" :before-upload="before" :on-success="success" :on-error="error" :on-preview="handlePreview" :on-exceed="handleExceed">
+		<el-upload ref="uploader" list-type="picture-card" 
+			:auto-upload="autoUpload" 
+			:disabled="disabled" 
+			:action="action" 
+			:name="name" 
+			:data="data" 
+			:http-request="request" 
+			:file-list="defaultFileList" 
+			:show-file-list="showFileList" 
+			:accept="accept" 
+			:multiple="multiple" 
+			:limit="limit" 
+			:before-upload="before" 
+			:on-success="success" 
+			:on-error="error" 
+			:on-preview="handlePreview" 
+			:on-exceed="handleExceed">
 			<slot>
 				<el-icon><el-icon-plus/></el-icon>
 			</slot>
@@ -39,6 +55,8 @@
 			tip: { type: String, default: "" },
 			action: { type: String, default: "" },
 			apiObj: { type: Object, default: () => {} },
+			name: { type: String, default: config.filename },
+			data: { type: Object, default: () => {} },
 			accept: { type: String, default: "image/gif, image/jpeg, image/png" },
 			maxSize: { type: Number, default: config.maxSizeFile },
 			limit: { type: Number, default: 0 },
@@ -169,8 +187,10 @@
 					apiObj = this.apiObj;
 				}
 				const data = new FormData();
-				var file = param.file
-				data.append("file", file);
+				data.append(param.filename, param.file);
+				for (const key in param.data) {
+					data.append(key, param.data[key]);
+				}
 				apiObj.post(data, {
 					onUploadProgress: e => {
 						const complete = parseInt(((e.loaded / e.total) * 100) | 0, 10)

src/config/upload.js

@@ -4,10 +4,9 @@ import API from "@/api";
 
 export default {
 	apiObj: API.common.upload,			//上传请求API对象
+	filename: "file",					//form请求时文件的key
 	successCode: 200,					//请求完成代码
 	maxSize: 10,						//最大文件大小 默认10MB
-	apiObjFile: API.common.uploadFile,	//附件上传请求API对象
-	maxSizeFile: 10,					//最大文件大小 默认10MB
 	parseData: function (res) {
 		return {
 			code: res.code,				//分析状态字段结构
@@ -15,5 +14,7 @@ export default {
 			src: res.data.src,			//分析图片远程地址结构
 			msg: res.message			//分析描述字段结构
 		}
-	}
+	},
+	apiObjFile: API.common.uploadFile,	//附件上传请求API对象
+	maxSizeFile: 10						//最大文件大小 默认10MB
 }

src/views/vab/upload.vue

@@ -1,7 +1,7 @@
 <template>
 	<el-main>
 		<el-card shadow="never" header="文件示例">
-			<sc-upload-file v-model="fileurl" :limit="3" tip="最多上传3个文件,单个文件不要超过10M,请上传xlsx/docx格式文件">
+			<sc-upload-file v-model="fileurl" :limit="3" :data="{otherData:'demo'}" tip="最多上传3个文件,单个文件不要超过10M,请上传xlsx/docx格式文件">
 				<el-button type="primary" icon="el-icon-upload">上传附件</el-button>
 			</sc-upload-file>
 		</el-card>