图片上传增加插糟&宽高参数

src/components/scUpload/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="sc-upload" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
+	<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"><i class="el-icon-delete"></i></span>
@@ -9,10 +9,12 @@
 		</div>
 		<div v-else class="sc-upload-uploader">
 			<el-upload ref="upload" class="uploader" :accept="accept" :action="action" :show-file-list="false" :before-upload="before" :on-success="success" :on-error="error">
-				<div class="file-empty">
+				<slot>
-					<i :class="icon"></i>
+					<div class="file-empty">
-					<h4>{{title}}</h4>
+						<i :class="icon"></i>
-				</div>
+						<h4>{{title}}</h4>
+					</div>
+				</slot>
 			</el-upload>
 		</div>
 		<el-input v-model="img" style="display:none"></el-input>
@@ -22,19 +24,26 @@
 <script>
 	export default {
 		props: {
+			height: {type: Number, default: 120},
+			width: {type: Number, default: 120},
 			modelValue: { type: String, default: "" },
 			action: { type: String, default: "#" },
 			accept: { type: String, default: ".jpg, .png, .jpeg, .gif" },
 			maxSize: { type: Number, default: 10 },
 			title: { type: String, default: "上传" },
-			icon: { type: String, default: "el-icon-plus" }
+			icon: { type: String, default: "el-icon-plus" },
+			onSuccess: { type: Function, default: () => { return true } }
 		},
 		data() {
 			return {
 				loading: false,
 				fileIsImg: true,
 				img: "",
-				tempImg: ""
+				tempImg: "",
+				style: {
+					width: this.width + "px",
+					height: this.height + "px"
+				}
 			}
 		},
 		watch:{
@@ -73,12 +82,15 @@
 			success(res){
 				this.loading = false;
 				this.tempImg = "";
+				var os = this.onSuccess(res);
+				if(os!=undefined && os==false){
+					return false;
+				}
 				if(res.code != 200){
 					this.$message.warning(res.message || "上传文件未知错误")
 				}else{
 					this.img = res.data.src;
 				}
-				this.$emit('on-success', res)
 			},
 			error(err){
 				this.$notify.error({

src/views/vab/upload.vue

@@ -3,8 +3,13 @@
 
 		<el-card shadow="never" header="基础示例">
 			<sc-upload v-model="imgurl" :action="uploadUrl"></sc-upload>
-			<sc-upload v-model="avatar" :action="uploadUrl"></sc-upload>
+			<sc-upload v-model="avatar" title="自定义" icon="el-icon-picture-outline" :action="uploadUrl"></sc-upload>
-			<sc-upload v-model="avatar" title="上传头像" icon="el-icon-picture-outline" :action="uploadUrl"></sc-upload>
+			<sc-upload v-model="avatar" title="自定义" icon="el-icon-picture-outline" :action="uploadUrl" accept=".xls,.xlsx" :on-success="success" :width="220">
+				<div class="custom-empty">
+					<i class="el-icon-upload"></i>
+					<p>自定义插槽</p>
+				</div>
+			</sc-upload>
 		</el-card>
 
 		<el-card shadow="never" header="在验证表单中使用">
@@ -74,6 +79,14 @@
 			}
 		},
 		methods: {
+			success(response){
+				this.$alert(`success函数钩子，return false后阻止后续执行，回调参数打开控制台查看`, {
+					title: "提示",
+					type: "success"
+				})
+				console.log(response);
+				return false;
+			},
 			submitForm(){
 				this.$refs.ruleForm.validate((valid) => {
 					if (valid) {
@@ -96,4 +109,7 @@
 
 	.imglist {margin-bottom:0;}
 	.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: 40px;color: #8c939d;}
+	.custom-empty p {font-size: 12px;font-weight: normal;color: #8c939d;margin-top: 10px;}
 </style>