UP

src/components/scUpload/index.vue

@@ -4,7 +4,8 @@
 			<div class="mask">
 				<span class="del" @click.stop="del"><i class="el-icon-delete"></i></span>
 			</div>
-			<el-image class="file" :src="tempImg || img" :preview-src-list="[img]" fit="cover" hide-on-click-modal append-to-body></el-image>
+			<el-image v-if="fileIsImg" class="image" :src="tempImg || img" :preview-src-list="[img]" fit="cover" hide-on-click-modal append-to-body></el-image>
+			<a v-else :href="img" class="file" target="_blank"><i class="el-icon-document"></i></a>
 		</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">
@@ -26,18 +27,19 @@
 			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" }
-			multiple: { type: Boolean, default: false },
 		},
 		data() {
 			return {
 				loading: false,
+				fileIsImg: true,
 				img: "",
 				tempImg: ""
 			}
 		},
 		watch:{
 			modelValue(){
+				this.isImg(this.modelValue)
 				this.img = this.modelValue;
 			},
 			img(){
@@ -45,15 +47,26 @@
 			}
 		},
 		mounted() {
+			this.isImg(this.modelValue)
 			this.img = this.modelValue;
 		},
 		methods: {
+			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;
+				}
+			},
 			before(file){
 				const maxSize = file.size / 1024 / 1024 < this.maxSize;
 				if (!maxSize) {
 					this.$message.warning('上传文件大小不能超过 10MB!');
 					return false;
 				}
+				this.isImg(file.name)
 				this.tempImg = URL.createObjectURL(file);
 				this.loading = true;
 			},
@@ -97,8 +110,10 @@
 	.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: 100%;height: 100%;}
+	.sc-upload-file .image {width: 100%;height: 100%;}
-	.sc-upload-file .file img {vertical-align: bottom;}
+	.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-uploader {border: 1px dashed #d9d9d9;box-sizing: border-box;width: 100%;height: 100%;}

src/components/scUpload/multiple.vue

@@ -0,0 +1,104 @@
+<template>
+	<div class="">
+		<div class="sc-upload-list">
+			<ul>
+				<li v-for="(file, index) in fileList" :key="index">
+					<div v-if="file.status!='success'">
+						loading
+					</div>
+					<div v-else>
+						<div class="mask">
+							<span class="del" @click.stop="del"><i class="el-icon-delete"></i></span>
+						</div>
+						<el-image class="image" :src="file.url" :preview-src-list="[file.url]" fit="cover" hide-on-click-modal append-to-body></el-image>
+					</div>
+				</li>
+			</ul>
+		</div>
+
+		<div class="sc-upload-uploader">
+			<el-upload ref="upload" :action="action" :accept="accept" multiple :show-file-list="true"  :before-upload="before" :on-success="success" :on-error="error">
+				<el-button size="small" type="primary">点击上传</el-button>
+			</el-upload>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		props: {
+			modelValue: { type: String, default: "" },
+			action: { type: String, default: "#" },
+			accept: { type: String, default: ".jpg, .png, .jpeg, .gif" },
+		},
+		data(){
+			return {
+				fileList: []
+			}
+		},
+		watch:{
+			// modelValue(){
+			// 	this.fileList = this.toArr(this.modelValue);
+			// },
+			// fileList: {
+			// 	handler(){
+			// 		this.$emit('update:modelValue', this.toStr(this.fileList));
+			// 	},
+			// 	deep: true
+			// }
+		},
+		mounted() {
+			this.fileList = this.toArr(this.modelValue);
+			this.$refs.upload.uploadFiles = this.fileList
+		},
+		methods: {
+			//默认值转换为数组
+			toArr(str){
+				var _arr = [];
+				var arr = str.split(",");
+				arr.forEach(item => {
+					_arr.push({
+						name: "F",
+						status: "success",
+						url: item
+					})
+				})
+				return _arr;
+			},
+			//数组转换为原始值
+			toStr(arr){
+				var _arr = [];
+				arr.forEach(item => {
+					_arr.push(item.url)
+				})
+				var str = _arr.join(",")
+				return str;
+			},
+			before(){
+				this.fileList = this.$refs.upload.uploadFiles;
+				this.fileList.forEach(item => {
+					if(item.status!='success'){
+						item.tempURL = URL.createObjectURL(item.raw);
+					}
+				})
+			},
+			success(res, file){
+				file.url = res.data.src
+			},
+			error(err){
+				this.$notify.error({
+					title: '上传文件错误',
+					message: err
+				})
+			},
+			del(index){
+				this.fileList.splice(index, 1);
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-upload-list li {list-style: none;    display: inline-block;width: 120px;height: 120px;}
+	.sc-upload-list .image {width: 100%;height: 100%;}
+</style>

src/views/vab/upload.vue

@@ -31,17 +31,28 @@
 			</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>
 
 <script>
+	import multiple from '@/components/scUpload/multiple'
+
 	export default {
 		name: 'upload',
+		components: {
+			scUploadMultiple: multiple
+		},
 		data() {
 			return {
 				uploadUrl: this.$API.demo.upload.url,
 				imgurl: "images/avatar.jpg",
 				avatar: "",
+				imgs: "images/avatar.jpg,images/avatar.jpg",
 				form: {
 					img1: "",
 					img2: "",

vue.config.js

@@ -1,4 +1,6 @@
 module.exports = {
+	//设置为空打包后不分更目录还是多级目录
+	publicPath:'',
 	//build编译后存放静态文件的目录
 	//assetsDir: "static",