From 92b34eb5b7c4d10420a07053d0ba93e1b2af7dde Mon Sep 17 00:00:00 2001
From: sakuya <81883387@qq.com>
Date: Mon, 23 May 2022 18:51:42 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=20scUpload=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

增加了scUploadFile 文件上传组件，取消了与资源库选择器的关联
---
 src/api/model/common.js              |   7 +
 src/components/scUpload/file.vue     | 149 ++++++++++++++
 src/components/scUpload/index.vue    | 291 ++++++++++++++++-----------
 src/components/scUpload/multiple.vue | 264 +++++++++++-------------
 src/config/upload.js                 |   3 +
 src/scui.js                          |   2 +
 src/views/vab/upload.vue             |  97 +++++----
 7 files changed, 517 insertions(+), 296 deletions(-)
 create mode 100644 src/components/scUpload/file.vue

diff --git a/src/api/model/common.js b/src/api/model/common.js
index 811ca9f8..50ad6cae 100644
--- a/src/api/model/common.js
+++ b/src/api/model/common.js
@@ -9,6 +9,13 @@ export default {
 			return await http.post(this.url, data, config);
 		}
 	},
+	uploadFile: {
+		url: `${config.API_URL}/uploadFile`,
+		name: "附件上传",
+		post: async function(data, config={}){
+			return await http.post(this.url, data, config);
+		}
+	},
 	file: {
 		menu: {
 			url: `${config.API_URL}/file/menu`,
diff --git a/src/components/scUpload/file.vue b/src/components/scUpload/file.vue
new file mode 100644
index 00000000..7c0e9289
--- /dev/null
+++ b/src/components/scUpload/file.vue
@@ -0,0 +1,149 @@
+<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">
+			<slot>
+				<el-button type="primary" :disabled="disabled">Click to upload</el-button>
+			</slot>
+			<template #tip>
+				<div v-if="tip" class="el-upload__tip">{{tip}}</div>
+			</template>
+		</el-upload>
+		<span style="display:none!important"><el-input v-model="value"></el-input></span>
+	</div>
+</template>
+
+<script>
+	import config from "@/config/upload"
+
+	export default {
+		props: {
+			modelValue: { type: String, default: "" },
+			tip: { type: String, default: "" },
+			action: { type: String, default: "" },
+			apiObj: { type: Object, default: () => {} },
+			accept: { type: String, default: "" },
+			maxSize: { type: Number, default: config.maxSizeFile },
+			limit: { type: Number, default: 0 },
+			autoUpload: { type: Boolean, default: true },
+			showFileList: { type: Boolean, default: true },
+			drag: { type: Boolean, default: false },
+			multiple: { type: Boolean, default: true },
+			disabled: { type: Boolean, default: false },
+			onSuccess: { type: Function, default: () => { return true } }
+		},
+		data() {
+			return {
+				value: "",
+				defaultFileList: []
+			}
+		},
+		watch:{
+			modelValue(val){
+				if (val != this.toStr(this.defaultFileList)) {
+					this.defaultFileList = this.toArr(val)
+					this.value = val
+				}
+			},
+			defaultFileList: {
+				handler(val){
+					this.$emit('update:modelValue', this.toStr(val))
+					this.value = this.toStr(val)
+				},
+				deep: true
+			}
+		},
+		mounted() {
+			this.value = this.modelValue
+			this.defaultFileList = this.toArr(this.modelValue)
+		},
+		methods: {
+			//默认值转换为数组
+			toArr(str){
+				var _arr = [];
+				var arr = str.split(",");
+				arr.forEach(item => {
+					if(item){
+						var urlArr = item.split('/');
+						var fileName = urlArr[urlArr.length - 1]
+						_arr.push({
+							name: fileName,
+							url: item
+						})
+					}
+				})
+				return _arr;
+			},
+			//数组转换为原始值
+			toStr(arr){
+				return arr.map(v => v.url).join(",")
+			},
+			before(file){
+				const maxSize = file.size / 1024 / 1024 < this.maxSize;
+				if (!maxSize) {
+					this.$message.warning(`上传文件大小不能超过 ${this.maxSize}MB!`);
+					return false;
+				}
+			},
+			success(res, file){
+				var os = this.onSuccess(res, file)
+				if(os!=undefined && os==false){
+					return false
+				}
+				var response = config.parseData(res)
+				file.name = response.fileName
+				file.url = response.src
+			},
+			error(err){
+				this.$notify.error({
+					title: '上传文件未成功',
+					message: err
+				})
+			},
+			beforeRemove(uploadFile){
+				return this.$confirm(`是否移除 ${uploadFile.name} ?`, '提示', {
+					type: 'warning',
+				}).then(() => {
+					return true
+				}).catch(() => {
+					return false
+				})
+			},
+			handleExceed(){
+				this.$message.warning(`当前设置最多上传 ${this.limit} 个文件，请移除后上传!`)
+			},
+			handlePreview(uploadFile){
+				window.open(uploadFile.url)
+			},
+			request(param){
+				var apiObj = config.apiObjFile;
+				if(this.apiObj){
+					apiObj = this.apiObj;
+				}
+				const data = new FormData();
+				var file = param.file
+				data.append("file", file);
+				apiObj.post(data, {
+					onUploadProgress: e => {
+						const complete = parseInt(((e.loaded / e.total) * 100) | 0, 10)
+						param.onProgress({percent: complete})
+					}
+				}).then(res => {
+					var response = config.parseData(res);
+					if(response.code == config.successCode){
+						param.onSuccess(res)
+					}else{
+						param.onError(response.msg || "未知错误")
+					}
+				}).catch(err => {
+					param.onError(err)
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.el-form-item.is-error .sc-upload-file:deep(.el-upload-dragger) {border-color: var(--el-color-danger);}
+	.sc-upload-file {width: 100%;}
+	.sc-upload-file:deep(.el-upload-list__item) {transition: none !important;}
+</style>
diff --git a/src/components/scUpload/index.vue b/src/components/scUpload/index.vue
index 1d86a47b..1eff7322 100644
--- a/src/components/scUpload/index.vue
+++ b/src/components/scUpload/index.vue
@@ -1,172 +1,211 @@
 <template>
-	<div class="sc-upload" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)" :style="style">
-		<div v-if="tempImg || img" class="sc-upload-file">
-			<div class="mask">
-				<span class="del" @click.stop="del"><el-icon><el-icon-delete /></el-icon></span>
+	<div class="sc-upload" :class="{'sc-upload-round':round}" :style="style">
+		<div v-if="file && file.status != 'success'" class="sc-upload__uploading">
+			<div class="sc-upload__progress">
+				<el-progress :percentage="file.percentage" :text-inside="true" :stroke-width="16"/>
 			</div>
-			<el-image v-if="fileIsImg" class="image" :src="tempImg || img" :preview-src-list="[img]" fit="cover" hide-on-click-modal append-to-body :z-index="9999"></el-image>
-			<a v-else :href="img" class="file" target="_blank"><el-icon><el-icon-document /></el-icon></a>
+			<el-image class="image" :src="file.tempFile" fit="cover"></el-image>
 		</div>
-		<div v-else class="sc-upload-uploader" @click="fileSelect && showfileSelect()">
-			<el-upload ref="upload" class="uploader" :disabled="fileSelect" :auto-upload="!cropper" :on-change="change" :accept="accept" :action="action" :show-file-list="false" :before-upload="before" :on-success="success" :on-error="error" :http-request="request">
-				<slot>
+		<div v-if="file && file.status=='success'" class="sc-upload__img">
+			<el-image class="image" :src="file.url" :preview-src-list="[file.url]" fit="cover" hide-on-click-modal append-to-body :z-index="9999">
+				<template #placeholder>
+					<div class="sc-upload__img-slot">
+						Loading...
+					</div>
+				</template>
+			</el-image>
+			<div class="sc-upload__img-actions" v-if="!disabled">
+				<span class="del" @click="handleRemove()"><el-icon><el-icon-delete /></el-icon></span>
+			</div>
+		</div>
+		<el-upload v-if="!file" class="uploader" ref="uploader"
+			:auto-upload="cropper?false:autoUpload"
+			:disabled="disabled"
+			:show-file-list="showFileList"
+			:action="action"
+			:accept="accept"
+			:limit="1"
+			:http-request="request"
+			:on-change="change"
+			:before-upload="before"
+			:on-success="success"
+			:on-error="error"
+			:on-exceed="handleExceed"
+		>
+			<slot>
+				<div class="el-upload--picture-card">
 					<div class="file-empty">
 						<el-icon><component :is="icon" /></el-icon>
 						<h4 v-if="title">{{title}}</h4>
 					</div>
-				</slot>
-			</el-upload>
-		</div>
-		<el-dialog title="剪裁" v-model="cropperDialogVisible" :width="580" destroy-on-close>
-			<sc-cropper :src="cropperImg" :compress="compress" :aspectRatio="aspectRatio" ref="cropper"></sc-cropper>
+				</div>
+			</slot>
+		</el-upload>
+		<span style="display:none!important"><el-input v-model="value"></el-input></span>
+		<el-dialog title="剪裁" draggable v-model="cropperDialogVisible" :width="580" @closed="cropperClosed" destroy-on-close>
+			<sc-cropper :src="cropperFile.tempCropperFile" :compress="compress" :aspectRatio="aspectRatio" ref="cropper"></sc-cropper>
 			<template #footer>
 				<el-button @click="cropperDialogVisible=false" >取 消</el-button>
 				<el-button type="primary" @click="cropperSave">确 定</el-button>
 			</template>
 		</el-dialog>
-		<el-dialog title="打开" v-model="fileSelectDialogVisible" :width="880" destroy-on-close>
-			<sc-file-select @submit="fileSelectSubmit">
-				<template #do>
-					<el-button @click="fileSelectDialogVisible=false" >取 消</el-button>
-				</template>
-			</sc-file-select>
-		</el-dialog>
-		<span style="display:none!important"><el-input v-model="img"></el-input></span>
-
 	</div>
 </template>
 
 <script>
 	import { defineAsyncComponent } from 'vue'
-	import config from "@/config/upload"
+	import { genFileId } from 'element-plus'
 	const scCropper = defineAsyncComponent(() => import('@/components/scCropper'))
-	const scFileSelect = defineAsyncComponent(() => import('@/components/scFileSelect'))
+	import config from "@/config/upload"
 
 	export default {
 		props: {
-			height: {type: Number, default: 120},
-			width: {type: Number, default: 120},
 			modelValue: { type: String, default: "" },
+			height: {type: Number, default: 148},
+			width: {type: Number, default: 148},
+			title: { type: String, default: "" },
+			icon: { type: String, default: "el-icon-plus" },
 			action: { type: String, default: "" },
 			apiObj: { type: Object, default: () => {} },
 			accept: { type: String, default: "image/gif, image/jpeg, image/png" },
-			maxSize: { type: Number, default: config.maxSize },
-			title: { type: String, default: "" },
-			icon: { type: String, default: "el-icon-plus" },
-			fileSelect: { type: Boolean, default: false },
+			maxSize: { type: Number, default: config.maxSizeFile },
+			limit: { type: Number, default: 1 },
+			autoUpload: { type: Boolean, default: true },
+			showFileList: { type: Boolean, default: false },
+			disabled: { type: Boolean, default: false },
+			round: { type: Boolean, default: false },
+			onSuccess: { type: Function, default: () => { return true } },
+
 			cropper: { type: Boolean, default: false },
 			compress: {type: Number, default: 1},
-			aspectRatio:  {type: Number, default: NaN},
-			onSuccess: { type: Function, default: () => { return true } }
+			aspectRatio:  {type: Number, default: NaN}
 		},
 		components: {
-			scCropper,
-			scFileSelect
+			scCropper
 		},
 		data() {
 			return {
-				loading: false,
-				fileIsImg: true,
-				img: "",
-				tempImg: "",
+				value: "",
+				file: null,
 				style: {
 					width: this.width + "px",
 					height: this.height + "px"
 				},
 				cropperDialogVisible: false,
-				cropperImg: "",
-				cropperUploadFile: null,
-				fileSelectDialogVisible: false,
+				cropperFile: null
 			}
 		},
 		watch:{
-			modelValue(){
-				this.isImg(this.modelValue)
-				this.img = this.modelValue;
+			modelValue(val){
+				this.value = val
+				this.newFile(val)
 			},
-			img(){
-				this.$emit('update:modelValue', this.img);
+			value(val){
+				this.$emit('update:modelValue', val)
 			}
 		},
 		mounted() {
-			this.isImg(this.modelValue)
-			this.img = this.modelValue;
+			this.value = this.modelValue
+			this.newFile(this.modelValue)
 		},
 		methods: {
-			showfileSelect(){
-				this.fileSelectDialogVisible = true
-			},
-			fileSelectSubmit(val){
-				this.img = val
-				this.fileSelectDialogVisible = false
+			newFile(url){
+				if(url){
+					this.file = {
+						status: "success",
+						url: url
+					}
+				}else{
+					this.file = null
+				}
 			},
 			cropperSave(){
-				var uploadFile = this.$refs.upload.uploadFiles[0].raw
 				this.$refs.cropper.getCropFile(file => {
-					this.cropperUploadFile = file
-					this.$refs.upload.submit()
-				}, uploadFile.name, uploadFile.type)
+
+					file.uid = this.cropperFile.uid
+					this.cropperFile.raw = file
+
+					this.file = this.cropperFile
+					this.file.tempFile = URL.createObjectURL(this.file.raw)
+					this.$refs.uploader.submit()
+
+				}, this.cropperFile.name, this.cropperFile.type)
 				this.cropperDialogVisible = false
 			},
-			isImg(fileUrl){
-				var strRegex = "(.jpg|.png|.gif|.jpeg)$";
-				var re = new RegExp(strRegex);
-				if (re.test(fileUrl.toLowerCase())){
-					this.fileIsImg=true;
-				}else{
-					this.fileIsImg=false;
-				}
+			cropperClosed(){
+				URL.revokeObjectURL(this.cropperFile.tempCropperFile)
+				delete this.cropperFile.tempCropperFile
+			},
+			handleRemove(){
+				this.clearFiles()
+			},
+			clearFiles(){
+				URL.revokeObjectURL(this.file.tempFile)
+				this.value = ""
+				this.file = null
+				this.$nextTick(()=>{
+					this.$refs.uploader.clearFiles()
+				})
 			},
 			change(file){
 				if(this.cropper && file.status=='ready'){
-					this.isImg(file.name)
-					if(!this.fileIsImg){
+					const acceptIncludes = ["image/gif", "image/jpeg", "image/png"].includes(file.raw.type)
+					if(!acceptIncludes){
 						this.$notify.warning({
 							title: '上传文件警告',
 							message: '选择的文件非图像类文件'
 						})
 						return false
 					}
+					this.cropperFile = file
+					this.cropperFile.tempCropperFile = URL.createObjectURL(file.raw)
 					this.cropperDialogVisible = true
-					this.cropperImg = URL.createObjectURL(file.raw)
+					return false
+				}
+				this.file = file
+				if(file.status=='ready'){
+					file.tempFile = URL.createObjectURL(file.raw)
 				}
 			},
 			before(file){
-				file = this.cropper ? this.cropperUploadFile : file
+				const acceptIncludes = this.accept.replace(/\s/g,"").split(",").includes(file.type)
+				if(!acceptIncludes){
+					this.$notify.warning({
+						title: '上传文件警告',
+						message: '选择的文件非图像类文件'
+					})
+					this.clearFiles()
+					return false
+				}
 				const maxSize = file.size / 1024 / 1024 < this.maxSize;
 				if (!maxSize) {
 					this.$message.warning(`上传文件大小不能超过 ${this.maxSize}MB!`);
-					return false;
+					this.clearFiles()
+					return false
 				}
-				this.isImg(file.name)
-				this.tempImg = URL.createObjectURL(file);
-				this.loading = true;
 			},
-			success(res){
-				this.loading = false;
-				this.tempImg = "";
-				var os = this.onSuccess(res);
-				if(os!=undefined && os==false){
-					return false;
-				}
-				var response = config.parseData(res);
-				if(response.code != config.successCode){
-					this.$message.warning(response.msg || "上传文件未知错误")
-				}else{
-					this.img = response.src;
-				}
+			handleExceed(files){
+				const file = files[0]
+				file.uid = genFileId()
+				this.$refs.uploader.handleStart(file)
+			},
+			success(res, file){
+				var response = config.parseData(res)
+				file.url = response.src
+				this.value = file.url
+
+				//释放内存删除blob
+				URL.revokeObjectURL(file.tempFile)
+				delete file.tempFile
 			},
 			error(err){
+				this.$nextTick(()=>{
+					this.clearFiles()
+				})
 				this.$notify.error({
-					title: '上传文件错误',
+					title: '上传文件未成功',
 					message: err
 				})
-				this.loading = false;
-				this.tempImg = "";
-				this.img = ""
-			},
-			del(){
-				this.img = ""
 			},
 			request(param){
 				var apiObj = config.apiObj;
@@ -174,10 +213,20 @@
 					apiObj = this.apiObj;
 				}
 				const data = new FormData();
-				var file = this.cropper ? this.cropperUploadFile : param.file
+				var file = param.file
 				data.append("file", file);
-				apiObj.post(data).then(res => {
-					param.onSuccess(res)
+				apiObj.post(data, {
+					onUploadProgress: e => {
+						const complete = parseInt(((e.loaded / e.total) * 100) | 0, 10)
+						param.onProgress({percent: complete})
+					}
+				}).then(res => {
+					var response = config.parseData(res);
+					if(response.code == config.successCode){
+						param.onSuccess(res)
+					}else{
+						param.onError(response.msg || "未知错误")
+					}
 				}).catch(err => {
 					param.onError(err)
 				})
@@ -186,32 +235,32 @@
 	}
 </script>
 
-<style>
-	.sc-upload+.sc-upload {margin-left: 10px;}
-</style>
-
 <style scoped>
-	.el-form-item.is-error .sc-upload-uploader {border: 1px dashed #F56C6C;}
+	.el-form-item.is-error .sc-upload .el-upload--picture-card {border-color: var(--el-color-danger);}
+	.sc-upload .el-upload--picture-card {border-radius: 0;}
 
-	.sc-upload {width: 120px;height: 120px;display: inline-block;vertical-align: top;box-sizing: border-box;}
+	.sc-upload .uploader,.sc-upload:deep(.el-upload) {width: 100%;height: 100%;}
 
-	.sc-upload-file {position: relative;width: 100%;height: 100%;}
-	.sc-upload-file .mask {display: none;position: absolute;top:0px;right:0px;line-height: 1;z-index: 1;}
-	.sc-upload-file .mask span {display: inline-block;width: 25px;height:25px;line-height: 23px;text-align: center;cursor: pointer;color: #fff;}
-	.sc-upload-file .mask span i {font-size: 12px;}
-	.sc-upload-file .mask .del {background: #F56C6C;}
-	.sc-upload-file .image {width: 100%;height: 100%;}
-	.sc-upload-file .image img {vertical-align: bottom;}
-	.sc-upload-file .file {width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;border: 1px solid #DCDFE6;}
-	.sc-upload-file .file i {font-size: 30px;color: #409EFF;}
-	.sc-upload-file:hover .mask {display: inline-block;}
+	.sc-upload__img {width: 100%;height: 100%;position: relative;}
+	.sc-upload__img .image {width: 100%;height: 100%;}
+	.sc-upload__img-actions {position: absolute;top:0;right: 0;display: none;}
+	.sc-upload__img-actions span {display: flex;justify-content: center;align-items: center;width: 25px;height:25px;cursor: pointer;color: #fff;}
+	.sc-upload__img-actions span i {font-size: 12px;}
+	.sc-upload__img-actions .del {background: #F56C6C;}
+	.sc-upload__img:hover .sc-upload__img-actions {display: block;}
+	.sc-upload__img-slot {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;font-size: 12px;background-color: var(--el-fill-color-lighter);}
 
-	.sc-upload-uploader {border: 1px dashed #d9d9d9;box-sizing: border-box;width: 100%;height: 100%;}
-	.sc-upload-uploader:hover {border: 1px dashed #409eff;}
-	.sc-upload-uploader .uploader {width: 100%;height: 100%;}
-	.sc-upload-uploader:deep(.el-upload) {width: 100%;height: 100%;}
+	.sc-upload__uploading {width: 100%;height: 100%;position: relative;}
+	.sc-upload__progress {position: absolute;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background-color: var(--el-overlay-color-lighter);z-index: 1;padding:10px;}
+	.sc-upload__progress .el-progress {width: 100%;}
+	.sc-upload__uploading .image {width: 100%;height: 100%;}
 
-	.sc-upload-uploader .file-empty {width: 100%;height: 100%;line-height: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;}
-	.sc-upload-uploader .file-empty i {font-size: 28px;color: #8c939d;}
-	.sc-upload-uploader .file-empty h4 {font-size: 12px;font-weight: normal;color: #8c939d;margin-top: 10px;}
+	.sc-upload .file-empty {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;}
+	.sc-upload .file-empty i {font-size: 28px;}
+	.sc-upload .file-empty h4 {font-size: 12px;font-weight: normal;color: #8c939d;margin-top: 8px;}
+
+	.sc-upload.sc-upload-round {border-radius: 50%;overflow: hidden;}
+	.sc-upload.sc-upload-round .el-upload--picture-card {border-radius: 50%;}
+	.sc-upload.sc-upload-round .sc-upload__img-actions {top: auto;left: 0;right: 0;bottom: 0;}
+	.sc-upload.sc-upload-round .sc-upload__img-actions span {width: 100%;}
 </style>
diff --git a/src/components/scUpload/multiple.vue b/src/components/scUpload/multiple.vue
index 21479bfb..1c39ab37 100644
--- a/src/components/scUpload/multiple.vue
+++ b/src/components/scUpload/multiple.vue
@@ -1,132 +1,98 @@
 <template>
 	<div class="sc-upload-multiple">
-		<div class="sc-upload-list">
-			<ul>
-				<li v-for="(file, index) in fileList" :key="index">
-					<div v-if="file.status!='success'" class="sc-upload-item" v-loading="true" element-loading-background="rgba(0, 0, 0, 0.5)">
-						<el-image class="image" :src="file.tempImg" fit="cover" :z-index="9999"></el-image>
+		<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">
+			<slot>
+				<el-icon><el-icon-plus/></el-icon>
+			</slot>
+			<template #tip>
+				<div v-if="tip" class="el-upload__tip">{{tip}}</div>
+			</template>
+			<template #file="{ file }">
+				<div class="sc-upload-list-item">
+					<el-image class="el-upload-list__item-thumbnail" :src="file.url" fit="cover" :preview-src-list="preview" :initial-index="preview.findIndex(n=>n==file.url)" hide-on-click-modal append-to-body :z-index="9999">
+						<template #placeholder>
+							<div class="sc-upload-multiple-image-slot">
+								Loading...
+							</div>
+						</template>
+					</el-image>
+					<div v-if="!disabled && file.status=='success'" class="sc-upload__item-actions">
+						<span class="del" @click="handleRemove(file)"><el-icon><el-icon-delete /></el-icon></span>
 					</div>
-					<div v-else class="sc-upload-item">
-						<div class="mask">
-							<span class="del" @click.stop="del(index)"><el-icon><el-icon-delete /></el-icon></span>
-						</div>
-						<el-image class="image" :src="file.url" fit="cover" :preview-src-list="preview" hide-on-click-modal append-to-body>
-							<template #placeholder>
-								<div class="image-slot">
-									<el-icon><el-icon-more-filled /></el-icon>
-								</div>
-							</template>
-						</el-image>
+					<div v-if="file.status=='ready' || file.status=='uploading'" class="sc-upload__item-progress">
+						<el-progress :percentage="file.percentage" :text-inside="true" :stroke-width="16"/>
 					</div>
-				</li>
-			</ul>
-		</div>
-		<div class="sc-upload-uploader" @click="fileSelect && showfileSelect()">
-			<el-upload ref="upload" class="uploader" :disabled="fileSelect" :action="action" :accept="accept" multiple  :show-file-list="false" :file-list="defaultFileList" :before-upload="before" :on-progress="progress" :on-success="success" :on-change="change" :on-remove="remove" :on-error="error" :http-request="request">
-				<div class="file-empty">
-					<el-icon><component :is="icon" /></el-icon>
-					<h4 v-if="title">{{title}}</h4>
 				</div>
-			</el-upload>
-		</div>
-		<el-dialog title="打开" v-model="fileSelectDialogVisible" :width="880" destroy-on-close>
-			<sc-file-select multiple @submit="fileSelectSubmit">
-				<template #do>
-					<el-button @click="fileSelectDialogVisible=false" >取 消</el-button>
-				</template>
-			</sc-file-select>
-		</el-dialog>
+			</template>
+		</el-upload>
 		<span style="display:none!important"><el-input v-model="value"></el-input></span>
-
 	</div>
 </template>
 
 <script>
-	import { defineAsyncComponent } from 'vue'
-	import config from "@/config/upload";
-	const scFileSelect = defineAsyncComponent(() => import('@/components/scFileSelect'))
+	import config from "@/config/upload"
+	import Sortable from 'sortablejs'
 
 	export default {
 		props: {
 			modelValue: { type: String, default: "" },
+			tip: { type: String, default: "" },
 			action: { type: String, default: "" },
 			apiObj: { type: Object, default: () => {} },
 			accept: { type: String, default: "image/gif, image/jpeg, image/png" },
-			maxSize: { type: Number, default: config.maxSize },
-			title: { type: String, default: "" },
-			icon: { type: String, default: "el-icon-plus" },
-			fileSelect: { type: Boolean, default: false }
-		},
-		components: {
-			scFileSelect
+			maxSize: { type: Number, default: config.maxSizeFile },
+			limit: { type: Number, default: 0 },
+			autoUpload: { type: Boolean, default: true },
+			showFileList: { type: Boolean, default: true },
+			multiple: { type: Boolean, default: true },
+			disabled: { type: Boolean, default: false },
+			draggable: { type: Boolean, default: false },
+			onSuccess: { type: Function, default: () => { return true } }
 		},
 		data(){
 			return {
 				value: "",
-				defaultFileList: [],
-				fileList: [],
-				fileSelectDialogVisible: false,
+				defaultFileList: []
 			}
 		},
 		watch:{
-			modelValue(){
-				this.$refs.upload.uploadFiles=this.modelValuetoArr
-				this.fileList = this.modelValuetoArr
-				this.value = this.modelValue
+			modelValue(val){
+				if (val != this.toStr(this.defaultFileList)) {
+					this.defaultFileList = this.toArr(val)
+					this.value = val
+				}
 			},
-			fileList: {
-				handler(){
-					if(this.isAllSuccess){
-						this.$emit('update:modelValue', this.fileListtoStr);
-					}
+			defaultFileList: {
+				handler(val){
+					this.$emit('update:modelValue', this.toStr(val))
+					this.value = this.toStr(val)
 				},
 				deep: true
 			}
 		},
 		computed: {
-			modelValuetoArr(){
-				return this.toArr(this.modelValue)
-			},
-			fileListtoStr(){
-				return this.toStr(this.fileList)
-			},
 			preview(){
-				return this.fileList.map(v => v.url)
-			},
-			isAllSuccess(){
-				var all_length = this.fileList.length;
-				var success_length = 0
-				this.fileList.forEach(item => {
-					if(item.status == "success"){
-						success_length += 1
-					}
-				})
-				return success_length == all_length
+				return this.defaultFileList.map(v => v.url)
 			}
 		},
 		mounted() {
-			this.defaultFileList = this.toArr(this.modelValue);
-			this.fileList = this.toArr(this.modelValue)
 			this.value = this.modelValue
+			this.defaultFileList = this.toArr(this.modelValue)
+			if(!this.disabled && this.draggable){
+				this.rowDrop()
+			}
 		},
 		methods: {
-			showfileSelect(){
-				this.fileSelectDialogVisible = true
-			},
-			fileSelectSubmit(val){
-				const newval = [...this.modelValue.split(","),...val].join(",")
-				this.$emit('update:modelValue', newval);
-				this.fileSelectDialogVisible = false
-			},
 			//默认值转换为数组
 			toArr(str){
 				var _arr = [];
 				var arr = str.split(",");
 				arr.forEach(item => {
 					if(item){
+						var urlArr = item.split('/');
+						var fileName = urlArr[urlArr.length - 1]
 						_arr.push({
-							name: "F",
-							status: "success",
+							name: fileName,
 							url: item
 						})
 					}
@@ -135,42 +101,67 @@
 			},
 			//数组转换为原始值
 			toStr(arr){
-				var _arr = [];
-				arr.forEach(item => {
-					_arr.push(item.url)
+				return arr.map(v => v.url).join(",")
+			},
+			//拖拽
+			rowDrop(){
+				const _this = this
+				const itemBox = this.$refs.uploader.$el.querySelector('.el-upload-list')
+				Sortable.create(itemBox, {
+					handle: ".el-upload-list__item",
+					animation: 200,
+					ghostClass: "ghost",
+					onEnd({ newIndex, oldIndex }) {
+						const tableData = _this.defaultFileList
+						const currRow = tableData.splice(oldIndex, 1)[0]
+						tableData.splice(newIndex, 0, currRow)
+					}
 				})
-				var str = _arr.join(",")
-				return str;
 			},
 			before(file){
+				if(!['image/jpeg','image/png','image/gif'].includes(file.type)){
+					this.$message.warning(`选择的文件类型 ${file.type} 非图像类文件`);
+					return false;
+				}
 				const maxSize = file.size / 1024 / 1024 < this.maxSize;
 				if (!maxSize) {
 					this.$message.warning(`上传文件大小不能超过 ${this.maxSize}MB!`);
 					return false;
 				}
 			},
-			change(file, fileList){
-				file.tempImg = URL.createObjectURL(file.raw);
-				this.fileList = fileList
-			},
 			success(res, file){
-				var response = config.parseData(res);
+				var os = this.onSuccess(res, file)
+				if(os!=undefined && os==false){
+					return false
+				}
+				var response = config.parseData(res)
+				file.name = response.fileName
 				file.url = response.src
-			},
-			progress(){
-
-			},
-			remove(){
-
 			},
 			error(err){
 				this.$notify.error({
-					title: '上传文件错误',
+					title: '上传文件未成功',
 					message: err
 				})
 			},
-			del(index){
-				this.fileList.splice(index, 1);
+			beforeRemove(uploadFile){
+				return this.$confirm(`是否移除 ${uploadFile.name} ?`, '提示', {
+					type: 'warning',
+				}).then(() => {
+					return true
+				}).catch(() => {
+					return false
+				})
+			},
+			handleRemove(file){
+				this.$refs.uploader.handleRemove(file)
+				//this.defaultFileList.splice(this.defaultFileList.findIndex(item => item.uid===file.uid), 1)
+			},
+			handleExceed(){
+				this.$message.warning(`当前设置最多上传 ${this.limit} 个文件，请移除后上传!`)
+			},
+			handlePreview(uploadFile){
+				window.open(uploadFile.url)
 			},
 			request(param){
 				var apiObj = config.apiObj;
@@ -178,9 +169,20 @@
 					apiObj = this.apiObj;
 				}
 				const data = new FormData();
-				data.append("file", param.file);
-				apiObj.post(data).then(res => {
-					param.onSuccess(res)
+				var file = param.file
+				data.append("file", file);
+				apiObj.post(data, {
+					onUploadProgress: e => {
+						const complete = parseInt(((e.loaded / e.total) * 100) | 0, 10)
+						param.onProgress({percent: complete})
+					}
+				}).then(res => {
+					var response = config.parseData(res);
+					if(response.code == config.successCode){
+						param.onSuccess(res)
+					}else{
+						param.onError(response.msg || "未知错误")
+					}
 				}).catch(err => {
 					param.onError(err)
 				})
@@ -190,38 +192,18 @@
 </script>
 
 <style scoped>
-
-	.el-form-item.is-error .sc-upload-uploader {border: 1px dashed #F56C6C;}
-
-	.sc-upload-multiple {display: inline-block;}
-
-
-	.sc-upload-list {display: inline-block;}
-	.sc-upload-list li {list-style: none;display: inline-block;width: 120px;height: 120px;margin-right: 10px;vertical-align: top;box-sizing: border-box;}
-
-	.sc-upload-item {position: relative;width: 100%;height: 100%;}
-	.sc-upload-item .mask {display: none;position: absolute;top:0px;right:0px;line-height: 1;z-index: 1;}
-	.sc-upload-item .mask span {display: inline-block;width: 25px;height:25px;line-height: 23px;text-align: center;cursor: pointer;color: #fff;}
-	.sc-upload-item .mask span i {font-size: 12px;}
-	.sc-upload-item .mask .del {background: #F56C6C;}
-
-	.sc-upload-item:hover .mask {display: inline-block;}
-
-
-	.sc-upload-list .image {width: 100%;height: 100%;}
-
-	.sc-upload-list .image-slot {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: #f5f7fa;color: #909399;}
-	.sc-upload-list .image-slot i {font-size: 20px;}
-
-	.sc-upload-uploader {border: 1px dashed #d9d9d9;width: 120px;height: 120px;display: inline-block;vertical-align: top;box-sizing: border-box;}
-	.sc-upload-uploader:hover {border: 1px dashed #409eff;}
-	.sc-upload-uploader .uploader {width: 100%;height: 100%;}
-	.sc-upload-uploader:deep(.el-upload) {width: 100%;height: 100%;}
-
-
-	.sc-upload-uploader .file-empty {width: 100%;height: 100%;line-height: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;}
-	.sc-upload-uploader .file-empty i {font-size: 28px;color: #8c939d;}
-	.sc-upload-uploader .file-empty h4 {font-size: 12px;font-weight: normal;color: #8c939d;margin-top: 10px;}
-
-
+	.el-form-item.is-error .sc-upload-multiple:deep(.el-upload--picture-card) {border-color: var(--el-color-danger);}
+	:deep(.el-upload-list__item) {transition:none;border-radius: 0;}
+	.sc-upload-multiple:deep(.el-upload-list__item.el-list-leave-active) {position: static!important;}
+	.sc-upload-multiple:deep(.el-upload--picture-card) {border-radius: 0;}
+	.sc-upload-list-item {width: 100%;height: 100%;position: relative;}
+	.sc-upload-multiple .el-image {display: block;}
+	.sc-upload-multiple .el-image:deep(img) {-webkit-user-drag: none;}
+	.sc-upload-multiple-image-slot {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;font-size: 12px;}
+	.sc-upload-multiple .el-upload-list__item:hover .sc-upload__item-actions{display: block;}
+	.sc-upload__item-actions {position: absolute;top:0;right: 0;display: none;}
+	.sc-upload__item-actions span {display: flex;justify-content: center;align-items: center;;width: 25px;height:25px;cursor: pointer;color: #fff;}
+	.sc-upload__item-actions span i {font-size: 12px;}
+	.sc-upload__item-actions .del {background: #F56C6C;}
+	.sc-upload__item-progress {position: absolute;width: 100%;height: 100%;top: 0;left: 0;background-color: var(--el-overlay-color-lighter);}
 </style>
diff --git a/src/config/upload.js b/src/config/upload.js
index 0ac0c7cd..7b8cddd3 100644
--- a/src/config/upload.js
+++ b/src/config/upload.js
@@ -6,9 +6,12 @@ export default {
 	apiObj: API.common.upload,			//上传请求API对象
 	successCode: 200,					//请求完成代码
 	maxSize: 10,						//最大文件大小 默认10MB
+	apiObjFile: API.common.uploadFile,	//附件上传请求API对象
+	maxSizeFile: 10,					//最大文件大小 默认10MB
 	parseData: function (res) {
 		return {
 			code: res.code,				//分析状态字段结构
+			fileName: res.data.fileName,//分析文件名称
 			src: res.data.src,			//分析图片远程地址结构
 			msg: res.message			//分析描述字段结构
 		}
diff --git a/src/scui.js b/src/scui.js
index 37863c59..8656c1f8 100644
--- a/src/scui.js
+++ b/src/scui.js
@@ -8,6 +8,7 @@ import scTable from './components/scTable'
 import scFilterBar from './components/scFilterBar'
 import scUpload from './components/scUpload'
 import scUploadMultiple from './components/scUpload/multiple'
+import scUploadFile from './components/scUpload/file'
 import scFormTable from './components/scFormTable'
 import scTableSelect from './components/scTableSelect'
 import scPageHeader from './components/scPageHeader'
@@ -45,6 +46,7 @@ export default {
 		app.component('scFilterBar', scFilterBar);
 		app.component('scUpload', scUpload);
 		app.component('scUploadMultiple', scUploadMultiple);
+		app.component('scUploadFile', scUploadFile);
 		app.component('scFormTable', scFormTable);
 		app.component('scTableSelect', scTableSelect);
 		app.component('scPageHeader', scPageHeader);
diff --git a/src/views/vab/upload.vue b/src/views/vab/upload.vue
index 6584e77e..0a1cf26e 100644
--- a/src/views/vab/upload.vue
+++ b/src/views/vab/upload.vue
@@ -1,32 +1,54 @@
 <template>
 	<el-main>
-
-		<el-card shadow="never" header="基础示例">
-			<sc-upload v-model="imgurl"></sc-upload>
-			<sc-upload v-model="imgurl2" title="自定义标题" icon="el-icon-picture"></sc-upload>
-			<sc-upload v-model="imgurl3" :apiObj="uploadApi" accept=".xls,.xlsx" :on-success="success" :width="220">
-				<div class="custom-empty">
-					<el-icon><el-icon-upload /></el-icon>
-					<p>自定义插槽</p>
-				</div>
-			</sc-upload>
-			<sc-upload v-model="imgurl4" title="开启剪裁" :cropper="true" :compress="1" :aspectRatio="1/1"></sc-upload>
+		<el-card shadow="never" header="文件示例">
+			<sc-upload-file v-model="fileurl" :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="图片卡片示例(已开启拖拽排序)">
+			<sc-upload-multiple v-model="fileurl2" draggable :limit="3" tip="最多上传3个文件,单个文件不要超过10M,请上传图像格式文件"></sc-upload-multiple>
+		</el-card>
+
+		<el-card shadow="never" header="单图像示例">
+			<el-space wrap :size="8">
+				<sc-upload v-model="fileurl3"></sc-upload>
+				<sc-upload v-model="fileurl4" title="自定义标题" icon="el-icon-picture"></sc-upload>
+				<sc-upload v-model="fileurl5" :apiObj="uploadApi" accept="image/jpg,image/png" :on-success="success" :width="220">
+					<div class="custom-empty">
+						<el-icon><el-icon-upload /></el-icon>
+						<p>自定义插槽</p>
+					</div>
+				</sc-upload>
+				<sc-upload v-model="fileurl6" round icon="el-icon-avatar" title="开启圆形"></sc-upload>
+				<sc-upload v-model="fileurl7" title="开启剪裁" :cropper="true" :compress="1" :aspectRatio="1/1"></sc-upload>
+			</el-space>
+		</el-card>
+
+
+
 		<el-card shadow="never" header="在验证表单中使用">
 			<el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
 				<el-form-item label="身份证" required>
-					<el-space wrap :size="10">
-						<el-form-item prop="img1">
-							<sc-upload v-model="form.img1" title="人像面"></sc-upload>
+					<el-space wrap :size="8">
+						<el-form-item prop="file1">
+							<sc-upload v-model="form.file1" title="人像面"></sc-upload>
 						</el-form-item>
-						<el-form-item prop="img2">
-							<sc-upload v-model="form.img2" title="国徽面"></sc-upload>
+						<el-form-item prop="file2">
+							<sc-upload v-model="form.file2" title="国徽面"></sc-upload>
 						</el-form-item>
 					</el-space>
 				</el-form-item>
-				<el-form-item label="其他凭证" prop="img3">
-					<sc-upload-multiple v-model="form.img3"></sc-upload-multiple>
+				<el-form-item label="其他凭证" prop="file3">
+					<sc-upload-multiple v-model="form.file3"></sc-upload-multiple>
+				</el-form-item>
+				<el-form-item label="附件" prop="file4">
+					<sc-upload-file v-model="form.file4" :limit="1" drag>
+						<el-icon class="el-icon--upload"><el-icon-upload-filled /></el-icon>
+						    <div class="el-upload__text">
+						      Drop file here or <em>click to upload</em>
+						    </div>
+					</sc-upload-file>
 				</el-form-item>
 				<el-form-item label="日期" prop="date">
 					<el-date-picker type="date" placeholder="选择日期" v-model="form.date"></el-date-picker>
@@ -47,26 +69,33 @@
 		data() {
 			return {
 				uploadApi: this.$API.common.upload,
-				imgurl: "img/avatar.jpg",
-				imgurl2: "",
-				imgurl3: "",
-				imgurl4: "",
+				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",
+				fileurl4: "",
+				fileurl5: "",
+				fileurl6: "",
+				fileurl7: "",
 				form: {
-					img1: "",
-					img2: "",
-					img3: "",
+					file1: "",
+					file2: "",
+					file3: "",
+					file4: "",
 					date: ""
 				},
 				rules: {
-					img1: [
+					file1: [
 						{required: true, message: '请上传', trigger: 'change'}
 					],
-					img2: [
+					file2: [
 						{required: true, message: '请上传', trigger: 'change'}
 					],
-					img3: [
+					file3: [
 						{required: true, message: '请上传', trigger: 'change'}
 					],
+					file4: [
+						{required: true, message: '请上传附件', trigger: 'change'}
+					],
 					date: [
 						{required: true, message: '请选择日期', trigger: 'change'}
 					]
@@ -75,12 +104,12 @@
 		},
 		methods: {
 			success(response){
-				this.$alert(`success函数钩子，return false后阻止后续执行，回调参数打开控制台查看`, {
+				this.$alert(`success函数钩子，可用于类似OCR返回信息，return false后阻止后续执行，回调参数打开控制台查看`, {
 					title: "提示",
 					type: "success"
 				})
 				console.log(response);
-				return false;
+				return true;
 			},
 			submitForm(){
 				this.$refs.ruleForm.validate((valid) => {
@@ -101,9 +130,9 @@
 
 <style scoped>
 	.el-card+.el-card {margin-top: 15px;}
+	.imglist .el-col+.el-col {margin-left: 8px;}
 
-	.imglist .el-col+.el-col {margin-left: 10px;}
-	.custom-empty {width: 100%;height: 100%;line-height: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;}
-	.custom-empty i {font-size: 30px;color: #8c939d;}
-	.custom-empty p {font-size: 12px;font-weight: normal;color: #8c939d;margin-top: 10px;}
+	.custom-empty {width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;background: #8c939d;border-radius:5px;}
+	.custom-empty i {font-size: 30px;color: #fff;}
+	.custom-empty p {font-size: 12px;font-weight: normal;color: #fff;margin-top: 10px;}
 </style>