支持上传格式

src/views/school/index.vue

@@ -69,7 +69,9 @@
             <Upload
               action
               class="file_left_up"
-              accept=".jpg,.jpeg,.png"
+              :format="pictureFormat"
+              :max-size="10 * 1024"
+              :accept="getPictureAccept()"
               :before-upload="
                 (file) => {
                   handleUpload(file);
@@ -102,6 +104,10 @@
               </div>
             </Upload>
           </div>
+          <div class="uptype">
+            <p>支持上传格式（10MB以内）:</p>
+            <p>jpg、jpeg、png、bmp、jfif、webp.</p>
+          </div>
         </div>
       </Form>
       <div slot="footer" style="text-align: right">
@@ -142,7 +148,9 @@
             <Upload
               action
               class="file_left_up"
-              accept=".jpg,.jpeg,.png"
+              :format="pictureFormat"
+              :max-size="10 * 1024"
+              :accept="getPictureAccept()"
               :before-upload="
                 (file) => {
                   handleUpload(file);
@@ -175,6 +183,10 @@
               </div>
             </Upload>
           </div>
+          <div class="uptype">
+            <p>支持修改格式（10MB以内）:</p>
+            <p>jpg、jpeg、png、bmp、jfif、webp.</p>
+          </div>
         </div>
       </Form>
       <div slot="footer" style="text-align: right">
@@ -194,9 +206,11 @@
 import axios from "axios";
 import { sl_list, sl_save, sl_update, sl_del } from "@/api/index";
 import { dateFormat } from "@/utils/index";
+import { pictureFormat } from "@/utils/fileConfig";
 export default {
   data() {
     return {
+      pictureFormat,
       userInfo: {},
       showLoading: false,
       form_search: {
@@ -374,6 +388,13 @@ export default {
     this.init();
   },
   methods: {
+    getPictureAccept() {
+      return this.pictureFormat
+          .map((v) => {
+            return `.${v}`;
+          })
+          .join(",");
+    },
     seach() {
       this.form_search.page = 1;
       this.init();
@@ -454,6 +475,7 @@ export default {
               this.add_form.show = false;
               this.add_form.schoolname = "";
               this.add_form.schoollogo = "";
+              this.$Message.success(res.msg);
               this.init();
             } else {
               this.$Message.error(res.msg);
@@ -464,20 +486,6 @@ export default {
     },
     handleUpload(file) {
       let that = this;
-      let size = file.size / 1024 / 1024;
-      if (!file.name) {
-        return;
-      }
-      let str = file.name.split(".");
-      let suffix = str[str.length - 1];
-      if (suffix !== "png" && suffix !== "jpg" && suffix !== "jpeg") {
-        this.$Message.error("请上传png、jpg、jpeg类型的文件");
-        return false;
-      }
-      if (size > 10) {
-        this.$Message.error("图片太大，不能超过10M！");
-        return false;
-      }
       let formData = new FormData();
       formData.append("file", file);
       formData.append("savefolder", "schoollogo");
@@ -563,4 +571,7 @@ export default {
     padding-right: 10px;
   }
 }
+.uptype{
+  padding-left: 10px;
+}
 </style>

src/views/service/index.vue

@@ -69,7 +69,9 @@
             <Upload
               action
               class="file_left_up"
-              accept=".jpg,.jpeg,.png"
+              :format="pictureFormat"
+              :max-size="10 * 1024"
+              :accept="getPictureAccept()"
               :before-upload="
                 (file) => {
                   handleUpload(file);
@@ -102,6 +104,10 @@
               </div>
             </Upload>
           </div>
+          <div class="uptype">
+            <p>支持上传格式（10MB以内）:</p>
+            <p>jpg、jpeg、png、bmp、jfif、webp.</p>
+          </div>
         </div>
       </Form>
       <div slot="footer" style="text-align: right">
@@ -142,7 +148,9 @@
             <Upload
               action
               class="file_left_up"
-              accept=".jpg,.jpeg,.png"
+              :format="pictureFormat"
+              :max-size="10 * 1024"
+              :accept="getPictureAccept()"
               :before-upload="
                 (file) => {
                   handleUpload(file);
@@ -175,6 +183,10 @@
               </div>
             </Upload>
           </div>
+          <div class="uptype">
+            <p>支持修改格式（10MB以内）:</p>
+            <p>jpg、jpeg、png、bmp、jfif、webp.</p>
+          </div>
         </div>
       </Form>
       <div slot="footer" style="text-align: right">
@@ -194,9 +206,11 @@
 import axios from "axios";
 import { sc_list, sc_save, sc_update, sc_remove } from "@/api/index";
 import { dateFormat } from "@/utils/index";
+import { pictureFormat } from "@/utils/fileConfig";
 export default {
   data() {
     return {
+      pictureFormat,
       userInfo: {},
       showLoading: false,
       form_search: {
@@ -374,6 +388,13 @@ export default {
     this.init();
   },
   methods: {
+    getPictureAccept() {
+      return this.pictureFormat
+        .map((v) => {
+          return `.${v}`;
+        })
+        .join(",");
+    },
     seach() {
       this.form_search.page = 1;
       this.init();
@@ -453,6 +474,7 @@ export default {
               this.add_form.show = false;
               this.add_form.scname = "";
               this.add_form.scpic = "";
+              this.$Message.success(res.msg);
               this.init();
             } else {
               this.$Message.error(res.msg);
@@ -463,20 +485,6 @@ export default {
     },
     handleUpload(file) {
       let that = this;
-      let size = file.size / 1024 / 1024;
-      if (!file.name) {
-        return;
-      }
-      let str = file.name.split(".");
-      let suffix = str[str.length - 1];
-      if (suffix !== "png" && suffix !== "jpg" && suffix !== "jpeg") {
-        this.$Message.error("请上传png、jpg、jpeg类型的文件");
-        return false;
-      }
-      if (size > 10) {
-        this.$Message.error("图片太大，不能超过10M！");
-        return false;
-      }
       let formData = new FormData();
       formData.append("file", file);
       formData.append("savefolder", "servicecase");
@@ -562,4 +570,7 @@ export default {
     padding-right: 10px;
   }
 }
+.uptype {
+  padding-left: 10px;
+}
 </style>