UP

public/json/login.json

@@ -49,6 +49,15 @@
 							"type": "menu"
 						},
 						"component": "vab/print"
+					},
+					{
+						"path": "/vab/upload",
+						"name": "upload",
+						"meta": {
+							"title": "上传",
+							"type": "menu"
+						},
+						"component": "vab/upload"
 					}
 				]
 			},

src/components/scUpload/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="sc-upload" v-loading="loading">
+	<div class="sc-upload" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
 		<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>
@@ -7,9 +7,9 @@
 			<el-image class="file" :src="tempImg || img" :preview-src-list="[img]" fit="cover" hide-on-click-modal append-to-body></el-image>
 		</div>
 		<div v-else class="sc-upload-uploader">
-			<el-upload ref="upload" v-loading="loading" class="uploader" :accept="accept" :action="action" :show-file-list="false" :before-upload="before" :on-success="success" :on-error="error">
+			<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">
-					<i class="el-icon-plus"></i>
+					<i :class="icon"></i>
 					<h4>{{title}}</h4>
 				</div>
 			</el-upload>
@@ -26,6 +26,8 @@
 			accept: { type: String, default: ".jpg, .png, .jpeg, .gif" },
 			maxSize: { type: Number, default: 10 },
 			title: { type: String, default: "上传" },
+			icon: { type: String, default: "el-icon-plus" },
+			multiple: { type: Boolean, default: false },
 		},
 		data() {
 			return {
@@ -43,8 +45,7 @@
 			}
 		},
 		mounted() {
-
+			this.img = this.modelValue;
-
 		},
 		methods: {
 			before(file){
@@ -82,23 +83,30 @@
 	}
 </script>
 
+<style>
+	.sc-upload+.sc-upload {margin-left: 10px;}
+</style>
+
 <style scoped>
 	.el-form-item.is-error .sc-upload-uploader {border: 1px dashed #F56C6C;}
 
-	.sc-upload {width: 120px;height: 120px;}
+	.sc-upload {width: 120px;height: 120px;display: inline-block;vertical-align: top;box-sizing: border-box;}
 
 	.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 .file {width: 120px;height: 120px;}
+	.sc-upload-file .file {width: 100%;height: 100%;}
 	.sc-upload-file .file img {vertical-align: bottom;}
 	.sc-upload-file:hover .mask {display: inline-block;}
 
-	.sc-upload-uploader {border: 1px dashed #d9d9d9;}
+	.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 .file-empty {width: 118px;height: 118px;line-height: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;}
+	.sc-upload-uploader .uploader {width: 100%;height: 100%;}
+	.sc-upload-uploader >>> .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;}
 </style>

src/views/vab/upload.vue

@@ -0,0 +1,85 @@
+<template>
+	<el-main>
+
+		<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>
+		</el-card>
+
+		<el-card shadow="never" header="在验证表单中使用">
+			<el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
+				<el-form-item label="身份证" class="imglist" required>
+					<el-col>
+						<el-form-item prop="img1">
+							<sc-upload v-model="form.img1" title="人像面" :action="uploadUrl"></sc-upload>
+						</el-form-item>
+					</el-col>
+					<el-col>
+						<el-form-item prop="img2">
+							<sc-upload v-model="form.img2" title="国徽面" :action="uploadUrl"></sc-upload>
+						</el-form-item>
+					</el-col>
+				</el-form-item>
+				<el-form-item label="日期" prop="date">
+					<el-date-picker type="date" placeholder="选择日期" v-model="form.date"></el-date-picker>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="submitForm">保存</el-button>
+				    <el-button @click="resetForm">重置</el-button>
+				</el-form-item>
+			</el-form>
+		</el-card>
+
+	</el-main>
+</template>
+
+<script>
+	export default {
+		name: 'upload',
+		data() {
+			return {
+				uploadUrl: this.$API.demo.upload.url,
+				imgurl: "images/avatar.jpg",
+				avatar: "",
+				form: {
+					img1: "",
+					img2: "",
+					date: ""
+				},
+				rules: {
+					img1: [
+						{required: true, message: '请上传', trigger: 'blur'}
+					],
+					img2: [
+						{required: true, message: '请上传', trigger: 'blur'}
+					],
+					date: [
+						{required: true, message: '请选择日期', trigger: 'blur'}
+					]
+				}
+			}
+		},
+		methods: {
+			submitForm(){
+				this.$refs.ruleForm.validate((valid) => {
+					if (valid) {
+						alert('submit!');
+					}else{
+						return false;
+					}
+				})
+			},
+			resetForm(){
+				this.$refs.ruleForm.resetFields();
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.el-card+.el-card {margin-top: 15px;}
+
+	.imglist {margin-bottom:0;}
+	.imglist .el-col+.el-col {margin-left: 10px;}
+</style>