diff --git a/src/components/scUpload/index.vue b/src/components/scUpload/index.vue index fa7c6396..66632705 100644 --- a/src/components/scUpload/index.vue +++ b/src/components/scUpload/index.vue @@ -4,7 +4,8 @@
- + +
@@ -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" }, - multiple: { type: Boolean, default: false }, + icon: { type: String, default: "el-icon-plus" } }, 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 .file img {vertical-align: bottom;} + .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-uploader {border: 1px dashed #d9d9d9;box-sizing: border-box;width: 100%;height: 100%;} diff --git a/src/components/scUpload/multiple.vue b/src/components/scUpload/multiple.vue new file mode 100644 index 00000000..265138e5 --- /dev/null +++ b/src/components/scUpload/multiple.vue @@ -0,0 +1,104 @@ + + + + + diff --git a/src/views/vab/upload.vue b/src/views/vab/upload.vue index 2ea6da9d..88391013 100644 --- a/src/views/vab/upload.vue +++ b/src/views/vab/upload.vue @@ -31,17 +31,28 @@ + + + + +