upload上传

src/components/ImageUpload/imgUploadForBanner.vue

@@ -45,6 +45,7 @@
           class="el-upload-list__item-thumbnail customer-upload-error"
           :src="file.url"
           :preview-src-list="[file.url]"
+          @error="imgError"
         >
           <div
             slot="error"
@@ -66,6 +67,7 @@
         </label>
         <span class="el-upload-list__item-actions">
           <span
+            v-if="showZoom"
             class="el-upload-list__item-preview"
             @click="handlePictureCardPreview(file)"
           >
@@ -138,6 +140,7 @@ export default {
   },
   data() {
     return {
+      showZoom: true,
       // 图片访问
       baseURL: process.env.VUE_APP_TEST_API,
       queryParams: {
@@ -195,9 +198,14 @@ export default {
     }
   },
   methods: {
+    imgError() {
+      this.showZoom = false
+    },
     // 文件状态改变时
     changeUpload(file) {
       var img = file.name.substring(file.name.lastIndexOf('.') + 1)
+      const fileName = file.name.substring(0, file.name.lastIndexOf('.'))
+      console.log('fileName', fileName)
       const suffix = img === 'jpg' || img === 'png' || img === 'jpeg'
       if (!suffix) {
         this.$message.error('文件格式不正确, 请上传png/jpg/jpeg图片格式文件')
@@ -212,6 +220,13 @@ export default {
           return false
         }
       }
+      const nameTest = /^[^~!@#$^&()_+\-\[\]{};',.]*$/
+      console.log('nameTest', !nameTest.test(fileName))
+      if (!nameTest.test(fileName)) {
+        this.$modal.msgError('不能含有~!@#$^&()_+-[]{};\',.等特殊字符')
+        this.$refs.imageUpload.clearFiles()
+        return false
+      }
       // URL.createObjectURL的参数只能是blob或者file类型
       // 第一种方法用FileReader，URL.createObjectURL接收blob类型
       const reader = new FileReader()
@@ -274,6 +289,7 @@ export default {
     },
     // 上传前loading加载
     handleBeforeUpload(file) {
+      this.showZoom = true
       console.log('图片file---,', file.name)
       const nameTest = /^[^%;]*$/
       if (!nameTest.test(file.name)) {
@@ -328,6 +344,7 @@ export default {
     },
     // 删除图片
     handleDelete(file) {
+      this.showZoom = true
       const findex = this.fileList.map(f => f.name).indexOf(file.name)
       if (findex > -1) {
         this.fileList.splice(findex, 1)

src/components/ImageUpload/index.vue

@@ -45,6 +45,7 @@
           class="el-upload-list__item-thumbnail customer-upload-error"
           :src="file.url"
           :preview-src-list="[file.url]"
+          @error="imgError"
         >
           <div
             slot="error"
@@ -66,6 +67,7 @@
         </label>
         <span class="el-upload-list__item-actions">
           <span
+            v-if="showZoom"
             class="el-upload-list__item-preview"
             @click="handlePictureCardPreview(file)"
           >
@@ -139,6 +141,7 @@ export default {
   },
   data() {
     return {
+      showZoom: true,
       // 图片访问
       baseURL: process.env.VUE_APP_TEST_API,
       queryParams: {
@@ -196,9 +199,14 @@ export default {
     }
   },
   methods: {
+    imgError() {
+      this.showZoom = false
+    },
     // 文件状态改变时
     changeUpload(file) {
       var img = file.name.substring(file.name.lastIndexOf('.') + 1)
+      const fileName = file.name.substring(0, file.name.lastIndexOf('.'))
+      console.log('fileName', fileName)
       const suffix = img === 'jpg' || img === 'png' || img === 'jpeg'
       if (!suffix) {
         this.$message.error('文件格式不正确, 请上传png/jpg/jpeg图片格式文件')
@@ -213,6 +221,13 @@ export default {
           return false
         }
       }
+      const nameTest = /^[^~!@#$^&()_+\-\[\]{};',.]*$/
+      console.log('nameTest', !nameTest.test(fileName))
+      if (!nameTest.test(fileName)) {
+        this.$modal.msgError('不能含有~!@#$^&()_+-[]{};\',.等特殊字符')
+        this.$refs.imageUpload.clearFiles()
+        return false
+      }
       // URL.createObjectURL的参数只能是blob或者file类型
       // 第一种方法用FileReader，URL.createObjectURL接收blob类型
       const reader = new FileReader()
@@ -279,6 +294,7 @@ export default {
 
     // 上传前loading加载
     handleBeforeUpload(file) {
+      this.showZoom = true
       console.log('图片file---,', file.name)
       const nameTest = /^[^%;]*$/
       if (!nameTest.test(file.name)) {
@@ -333,6 +349,7 @@ export default {
     },
     // 删除图片
     handleDelete(file) {
+      this.showZoom = true
       const findex = this.fileList.map(f => f.name).indexOf(file.name)
       if (findex > -1) {
         this.fileList.splice(findex, 1)