Browse Source

支持上传格式

gzb
guozhongbo 1 year ago
parent
commit
cdec076644
2 changed files with 54 additions and 32 deletions
  1. 27
    16
      src/views/school/index.vue
  2. 27
    16
      src/views/service/index.vue

+ 27
- 16
src/views/school/index.vue View File

69
             <Upload
69
             <Upload
70
               action
70
               action
71
               class="file_left_up"
71
               class="file_left_up"
72
-              accept=".jpg,.jpeg,.png"
72
+              :format="pictureFormat"
73
+              :max-size="10 * 1024"
74
+              :accept="getPictureAccept()"
73
               :before-upload="
75
               :before-upload="
74
                 (file) => {
76
                 (file) => {
75
                   handleUpload(file);
77
                   handleUpload(file);
102
               </div>
104
               </div>
103
             </Upload>
105
             </Upload>
104
           </div>
106
           </div>
107
+          <div class="uptype">
108
+            <p>支持上传格式(10MB以内):</p>
109
+            <p>jpg、jpeg、png、bmp、jfif、webp.</p>
110
+          </div>
105
         </div>
111
         </div>
106
       </Form>
112
       </Form>
107
       <div slot="footer" style="text-align: right">
113
       <div slot="footer" style="text-align: right">
142
             <Upload
148
             <Upload
143
               action
149
               action
144
               class="file_left_up"
150
               class="file_left_up"
145
-              accept=".jpg,.jpeg,.png"
151
+              :format="pictureFormat"
152
+              :max-size="10 * 1024"
153
+              :accept="getPictureAccept()"
146
               :before-upload="
154
               :before-upload="
147
                 (file) => {
155
                 (file) => {
148
                   handleUpload(file);
156
                   handleUpload(file);
175
               </div>
183
               </div>
176
             </Upload>
184
             </Upload>
177
           </div>
185
           </div>
186
+          <div class="uptype">
187
+            <p>支持修改格式(10MB以内):</p>
188
+            <p>jpg、jpeg、png、bmp、jfif、webp.</p>
189
+          </div>
178
         </div>
190
         </div>
179
       </Form>
191
       </Form>
180
       <div slot="footer" style="text-align: right">
192
       <div slot="footer" style="text-align: right">
194
 import axios from "axios";
206
 import axios from "axios";
195
 import { sl_list, sl_save, sl_update, sl_del } from "@/api/index";
207
 import { sl_list, sl_save, sl_update, sl_del } from "@/api/index";
196
 import { dateFormat } from "@/utils/index";
208
 import { dateFormat } from "@/utils/index";
209
+import { pictureFormat } from "@/utils/fileConfig";
197
 export default {
210
 export default {
198
   data() {
211
   data() {
199
     return {
212
     return {
213
+      pictureFormat,
200
       userInfo: {},
214
       userInfo: {},
201
       showLoading: false,
215
       showLoading: false,
202
       form_search: {
216
       form_search: {
374
     this.init();
388
     this.init();
375
   },
389
   },
376
   methods: {
390
   methods: {
391
+    getPictureAccept() {
392
+      return this.pictureFormat
393
+          .map((v) => {
394
+            return `.${v}`;
395
+          })
396
+          .join(",");
397
+    },
377
     seach() {
398
     seach() {
378
       this.form_search.page = 1;
399
       this.form_search.page = 1;
379
       this.init();
400
       this.init();
454
               this.add_form.show = false;
475
               this.add_form.show = false;
455
               this.add_form.schoolname = "";
476
               this.add_form.schoolname = "";
456
               this.add_form.schoollogo = "";
477
               this.add_form.schoollogo = "";
478
+              this.$Message.success(res.msg);
457
               this.init();
479
               this.init();
458
             } else {
480
             } else {
459
               this.$Message.error(res.msg);
481
               this.$Message.error(res.msg);
464
     },
486
     },
465
     handleUpload(file) {
487
     handleUpload(file) {
466
       let that = this;
488
       let that = this;
467
-      let size = file.size / 1024 / 1024;
468
-      if (!file.name) {
469
-        return;
470
-      }
471
-      let str = file.name.split(".");
472
-      let suffix = str[str.length - 1];
473
-      if (suffix !== "png" && suffix !== "jpg" && suffix !== "jpeg") {
474
-        this.$Message.error("请上传png、jpg、jpeg类型的文件");
475
-        return false;
476
-      }
477
-      if (size > 10) {
478
-        this.$Message.error("图片太大,不能超过10M!");
479
-        return false;
480
-      }
481
       let formData = new FormData();
489
       let formData = new FormData();
482
       formData.append("file", file);
490
       formData.append("file", file);
483
       formData.append("savefolder", "schoollogo");
491
       formData.append("savefolder", "schoollogo");
563
     padding-right: 10px;
571
     padding-right: 10px;
564
   }
572
   }
565
 }
573
 }
574
+.uptype{
575
+  padding-left: 10px;
576
+}
566
 </style>
577
 </style>

+ 27
- 16
src/views/service/index.vue View File

69
             <Upload
69
             <Upload
70
               action
70
               action
71
               class="file_left_up"
71
               class="file_left_up"
72
-              accept=".jpg,.jpeg,.png"
72
+              :format="pictureFormat"
73
+              :max-size="10 * 1024"
74
+              :accept="getPictureAccept()"
73
               :before-upload="
75
               :before-upload="
74
                 (file) => {
76
                 (file) => {
75
                   handleUpload(file);
77
                   handleUpload(file);
102
               </div>
104
               </div>
103
             </Upload>
105
             </Upload>
104
           </div>
106
           </div>
107
+          <div class="uptype">
108
+            <p>支持上传格式(10MB以内):</p>
109
+            <p>jpg、jpeg、png、bmp、jfif、webp.</p>
110
+          </div>
105
         </div>
111
         </div>
106
       </Form>
112
       </Form>
107
       <div slot="footer" style="text-align: right">
113
       <div slot="footer" style="text-align: right">
142
             <Upload
148
             <Upload
143
               action
149
               action
144
               class="file_left_up"
150
               class="file_left_up"
145
-              accept=".jpg,.jpeg,.png"
151
+              :format="pictureFormat"
152
+              :max-size="10 * 1024"
153
+              :accept="getPictureAccept()"
146
               :before-upload="
154
               :before-upload="
147
                 (file) => {
155
                 (file) => {
148
                   handleUpload(file);
156
                   handleUpload(file);
175
               </div>
183
               </div>
176
             </Upload>
184
             </Upload>
177
           </div>
185
           </div>
186
+          <div class="uptype">
187
+            <p>支持修改格式(10MB以内):</p>
188
+            <p>jpg、jpeg、png、bmp、jfif、webp.</p>
189
+          </div>
178
         </div>
190
         </div>
179
       </Form>
191
       </Form>
180
       <div slot="footer" style="text-align: right">
192
       <div slot="footer" style="text-align: right">
194
 import axios from "axios";
206
 import axios from "axios";
195
 import { sc_list, sc_save, sc_update, sc_remove } from "@/api/index";
207
 import { sc_list, sc_save, sc_update, sc_remove } from "@/api/index";
196
 import { dateFormat } from "@/utils/index";
208
 import { dateFormat } from "@/utils/index";
209
+import { pictureFormat } from "@/utils/fileConfig";
197
 export default {
210
 export default {
198
   data() {
211
   data() {
199
     return {
212
     return {
213
+      pictureFormat,
200
       userInfo: {},
214
       userInfo: {},
201
       showLoading: false,
215
       showLoading: false,
202
       form_search: {
216
       form_search: {
374
     this.init();
388
     this.init();
375
   },
389
   },
376
   methods: {
390
   methods: {
391
+    getPictureAccept() {
392
+      return this.pictureFormat
393
+        .map((v) => {
394
+          return `.${v}`;
395
+        })
396
+        .join(",");
397
+    },
377
     seach() {
398
     seach() {
378
       this.form_search.page = 1;
399
       this.form_search.page = 1;
379
       this.init();
400
       this.init();
453
               this.add_form.show = false;
474
               this.add_form.show = false;
454
               this.add_form.scname = "";
475
               this.add_form.scname = "";
455
               this.add_form.scpic = "";
476
               this.add_form.scpic = "";
477
+              this.$Message.success(res.msg);
456
               this.init();
478
               this.init();
457
             } else {
479
             } else {
458
               this.$Message.error(res.msg);
480
               this.$Message.error(res.msg);
463
     },
485
     },
464
     handleUpload(file) {
486
     handleUpload(file) {
465
       let that = this;
487
       let that = this;
466
-      let size = file.size / 1024 / 1024;
467
-      if (!file.name) {
468
-        return;
469
-      }
470
-      let str = file.name.split(".");
471
-      let suffix = str[str.length - 1];
472
-      if (suffix !== "png" && suffix !== "jpg" && suffix !== "jpeg") {
473
-        this.$Message.error("请上传png、jpg、jpeg类型的文件");
474
-        return false;
475
-      }
476
-      if (size > 10) {
477
-        this.$Message.error("图片太大,不能超过10M!");
478
-        return false;
479
-      }
480
       let formData = new FormData();
488
       let formData = new FormData();
481
       formData.append("file", file);
489
       formData.append("file", file);
482
       formData.append("savefolder", "servicecase");
490
       formData.append("savefolder", "servicecase");
562
     padding-right: 10px;
570
     padding-right: 10px;
563
   }
571
   }
564
 }
572
 }
573
+.uptype {
574
+  padding-left: 10px;
575
+}
565
 </style>
576
 </style>

Loading…
Cancel
Save