图片上传功能

src/views/restaurant/images/index.vue

@@ -86,10 +86,13 @@
             :on-preview="handlePreview"
             :on-remove="handleRemove"
             :on-success="handleSuccess"
+            :on-error="handleError"
             :before-upload="beforeUpload"
             :file-list="fileList"
             :data="form"
+            :limit="1"
             list-type="picture"
+            accept=".jpg,.jpeg,.png"
           >
             <el-button size="small" type="primary">点击上传</el-button>
             <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
@@ -145,7 +148,7 @@ export default {
       // 上传参数
       upload: {
         // 上传地址
-        url: process.env.VUE_APP_BASE_API + "/restaurant/images/upload",
+        url: process.env.VUE_APP_BASE_API + "/restaurant/images/uploadDispatchings",
         // 设置上传的请求头部
         headers: { Authorization: "Bearer " + getToken() }
       },
@@ -218,27 +221,34 @@ export default {
     },
     /** 文件上传成功处理 */
     handleSuccess(response, file, fileList) {
+      console.log('上传响应:', response);
+      console.log('上传文件:', file);
+      console.log('文件列表:', fileList);
+      
       if (response.code === 200) {
-        this.form.imageUrl = response.data;
+        this.form.imageUrl = response.data || response.url;
         this.$modal.msgSuccess("上传成功");
-        this.getList();
+        this.fileList = fileList;
-        this.open = false;
       } else {
         this.$modal.msgError(response.msg || "上传失败");
+        // 从文件列表中移除失败的文件
+        this.fileList = fileList.filter(item => item.uid !== file.uid);
       }
     },
     /** 文件上传前的处理 */
     beforeUpload(file) {
       const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
-      const isLt2M = file.size / 1024 / 1024 < 2;
+      const isLt2M = file.size / 1024 / 1024 < 3;
 
       if (!isJPG) {
         this.$message.error('上传图片只能是 JPG/PNG 格式!');
+        return false;
       }
       if (!isLt2M) {
-        this.$message.error('上传图片大小不能超过 2MB!');
+        this.$message.error('上传图片大小不能超过 3MB!');
+        return false;
       }
-      return isJPG && isLt2M;
+      return true;
     },
     /** 文件列表移除时的钩子 */
     handleRemove(file, fileList) {
@@ -256,23 +266,29 @@ export default {
             this.$modal.msgError("请先上传图片");
             return;
           }
-          if (this.form.id) {
+          
-            // 更新操作
+          // 使用正确的API接口
-            uploadDispatchingFile(this.form).then(response => {
+          uploadDispatchingFile(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
+            if (response.code === 200) {
+              this.$modal.msgSuccess(this.form.id ? "修改成功" : "新增成功");
               this.open = false;
               this.getList();
-            });
+            } else {
-          } else {
+              this.$modal.msgError(response.msg || "操作失败");
-            // 新增操作
+            }
-            uploadDispatchingFile(this.form).then(response => {
+          }).catch(error => {
-              this.$modal.msgSuccess("新增成功");
+            console.error('提交失败:', error);
-              this.open = false;
+            this.$modal.msgError("操作失败，请重试");
-              this.getList();
+          });
-            });
-          }
         }
       });
+    },
+    /** 文件上传错误处理 */
+    handleError(error, file) {
+      console.error('上传错误:', error);
+      this.$modal.msgError("上传失败，请重试");
+      // 从文件列表中移除失败的文件
+      this.fileList = this.fileList.filter(item => item.uid !== file.uid);
     }
   }
 };