up

src/components/scUpload/multiple.vue

@@ -3,29 +3,36 @@
 
 		<div class="sc-upload-list">
 			<ul>
-				<li v-for="(file, index) in defaultFileList" :key="index">
+				<li v-for="(file, index) in fileList" :key="index">
-					<div v-if="file.status!='success'">
+					<div v-if="file.status!='success'" class="sc-upload-item" v-loading="true" element-loading-background="rgba(0, 0, 0, 0.5)">
-						loading
+						<el-image class="image" :src="file.tempImg" fit="cover"></el-image>
 					</div>
-					<div v-else>
+					<div v-else class="sc-upload-item">
 						<div class="mask">
 							<span class="del" @click.stop="del(index)"><i class="el-icon-delete"></i></span>
 						</div>
-						<el-image class="image" :src="file.url" :preview-src-list="preview" :initial-index="index" fit="cover" hide-on-click-modal append-to-body></el-image>
+						<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">
+								    <i class="el-icon-more"></i>
+								</div>
+							</template>
+						</el-image>
 					</div>
 				</li>
 			</ul>
-			{{defaultFileList}}
 		</div>
 
 		<div class="sc-upload-uploader">
-			<el-upload ref="upload" class="uploader" :action="action" :accept="accept" multiple  :show-file-list="false" :before-upload="before" :on-progress="progress" :on-success="success" :on-change="change" :on-remove="remove" :on-error="error">
+			<el-upload ref="upload" class="uploader" :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">
 				<div class="file-empty">
 					<i :class="icon"></i>
 					<h4>{{title}}</h4>
 				</div>
 			</el-upload>
 		</div>
+
+		<el-input v-model="value" style="display:none"></el-input>
 	</div>
 </template>
 
@@ -40,28 +47,52 @@
 		},
 		data(){
 			return {
-				defaultFileList: this.toArr(this.modelValue)
+				value: "",
+				defaultFileList: [],
+				fileList: []
 			}
 		},
 		watch:{
-			modelValue(val){
+			modelValue(){
-				this.defaultFileList = this.toArr(val)
+				this.fileList = this.modelValuetoArr
+				this.value = this.modelValue
 			},
-			defaultFileList: {
+			fileList: {
-				handler(val){
+				handler(){
-					console.log(val);
+					if(this.isAllSuccess){
-					this.$emit('update:modelValue', this.toStr(val));
+						this.$emit('update:modelValue', this.fileListtoStr);
+					}
 				},
-				//deep: true
+				deep: true
 			}
 		},
 		computed: {
+			modelValuetoArr(){
+				return this.toArr(this.modelValue)
+			},
+			fileListtoStr(){
+				return this.toStr(this.fileList)
+			},
 			preview(){
-				return this.defaultFileList.map(v => v.url)
+				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
+
 			}
 		},
 		mounted() {
-
+			this.defaultFileList = this.toArr(this.modelValue);
+			this.fileList = this.toArr(this.modelValue)
+			this.value = this.modelValue
 		},
 		methods: {
 			//默认值转换为数组
@@ -83,7 +114,9 @@
 			toStr(arr){
 				var _arr = [];
 				arr.forEach(item => {
-					_arr.push(item.url)
+
+						_arr.push(item.url)
+
 				})
 				var str = _arr.join(",")
 				return str;
@@ -91,12 +124,9 @@
 			before(){
 
 			},
-			change(file){
+			change(file, fileList){
-				if(file.status =='ready'){
+				file.tempImg = URL.createObjectURL(file.raw);
-					file.aa = "123"
+				this.fileList = fileList
-					file.url = URL.createObjectURL(file.raw);
-					this.defaultFileList.push(file)
-				}
 			},
 			success(res, file){
 				file.url = res.data.src
@@ -114,8 +144,8 @@
 				})
 			},
 			del(index){
-				this.defaultFileList.splice(index, 1);
+				this.fileList.splice(index, 1);
-				this.$refs.upload.uploadFiles.splice(index-this.defaultFileList.length-1, 1);
+				this.$refs.upload.uploadFiles.splice(index-this.fileList.length-1, 1);
 			}
 		}
 	}
@@ -123,19 +153,34 @@
 
 <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;}
+
+	.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 li {list-style: none;    display: inline-block;width: 120px;height: 120px;}
 	.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;}

src/views/vab/upload.vue

@@ -21,6 +21,9 @@
 						</el-form-item>
 					</el-col>
 				</el-form-item>
+				<el-form-item label="其他凭证" prop="img3">
+					<sc-upload-multiple v-model="form.img3" :action="uploadUrl"></sc-upload-multiple>
+				</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>
@@ -31,11 +34,6 @@
 			</el-form>
 		</el-card>
 
-		<el-card shadow="never" header="多选">
-			<sc-upload-multiple v-model="imgs" :action="uploadUrl"></sc-upload-multiple>
-			<el-input v-model="imgs"></el-input>
-		</el-card>
-
 	</el-main>
 </template>
 
@@ -56,6 +54,7 @@
 				form: {
 					img1: "",
 					img2: "",
+					img3: "",
 					date: ""
 				},
 				rules: {
@@ -65,6 +64,9 @@
 					img2: [
 						{required: true, message: '请上传', trigger: 'change'}
 					],
+					img3: [
+						{required: true, message: '请上传', trigger: 'change'}
+					],
 					date: [
 						{required: true, message: '请选择日期', trigger: 'change'}
 					]
@@ -75,7 +77,8 @@
 			submitForm(){
 				this.$refs.ruleForm.validate((valid) => {
 					if (valid) {
-						alert('submit!');
+						alert('请看控制台输出');
+						console.log(this.form);
 					}else{
 						return false;
 					}