Przeglądaj źródła

修复多文件上传报错出现的异常问题

RuoYi 3 lat temu
rodzic
commit
8c7986acdb

+ 20 - 8
ruoyi-ui/src/components/FileUpload/index.vue

@@ -12,7 +12,7 @@
12 12
       :show-file-list="false"
13 13
       :headers="headers"
14 14
       class="upload-file-uploader"
15
-      ref="upload"
15
+      ref="fileUpload"
16 16
     >
17 17
       <!-- 上传按钮 -->
18 18
       <el-button size="mini" type="primary">选取文件</el-button>
@@ -150,14 +150,16 @@ export default {
150 150
       this.$modal.closeLoading()
151 151
     },
152 152
     // 上传成功回调
153
-    handleUploadSuccess(res) {
154
-      this.uploadList.push({ name: res.data.url, url: res.data.url });
155
-      if (this.uploadList.length === this.number) {
156
-        this.fileList = this.fileList.concat(this.uploadList);
157
-        this.uploadList = [];
158
-        this.number = 0;
159
-        this.$emit("input", this.listToString(this.fileList));
153
+    handleUploadSuccess(res, file) {
154
+      if (res.code === 200) {
155
+        this.uploadList.push({ name: res.data.url, url: res.data.url });
156
+        this.uploadedSuccessfully();
157
+      } else {
158
+        this.number--;
160 159
         this.$modal.closeLoading();
160
+        this.$modal.msgError(res.msg);
161
+        this.$refs.fileUpload.handleRemove(file);
162
+        this.uploadedSuccessfully();
161 163
       }
162 164
     },
163 165
     // 删除文件
@@ -165,6 +167,16 @@ export default {
165 167
       this.fileList.splice(index, 1);
166 168
       this.$emit("input", this.listToString(this.fileList));
167 169
     },
170
+    // 上传结束处理
171
+    uploadedSuccessfully() {
172
+      if (this.number > 0 && this.uploadList.length === this.number) {
173
+        this.fileList = this.fileList.concat(this.uploadList);
174
+        this.uploadList = [];
175
+        this.number = 0;
176
+        this.$emit("input", this.listToString(this.fileList));
177
+        this.$modal.closeLoading();
178
+      }
179
+    },
168 180
     // 获取文件名称
169 181
     getFileName(name) {
170 182
       if (name.lastIndexOf("/") > -1) {

+ 36 - 22
ruoyi-ui/src/components/ImageUpload/index.vue

@@ -9,8 +9,8 @@
9 9
       :limit="limit"
10 10
       :on-error="handleUploadError"
11 11
       :on-exceed="handleExceed"
12
-      name="file"
13
-      :on-remove="handleRemove"
12
+      ref="imageUpload"
13
+      :on-remove="handleDelete"
14 14
       :show-file-list="true"
15 15
       :headers="headers"
16 16
       :file-list="fileList"
@@ -112,25 +112,6 @@ export default {
112 112
     },
113 113
   },
114 114
   methods: {
115
-    // 删除图片
116
-    handleRemove(file, fileList) {
117
-      const findex = this.fileList.map(f => f.name).indexOf(file.name);
118
-      if(findex > -1) {
119
-        this.fileList.splice(findex, 1);
120
-        this.$emit("input", this.listToString(this.fileList));
121
-      }
122
-    },
123
-    // 上传成功回调
124
-    handleUploadSuccess(res) {
125
-      this.uploadList.push({ name: res.data.url, url: res.data.url });
126
-      if (this.uploadList.length === this.number) {
127
-        this.fileList = this.fileList.concat(this.uploadList);
128
-        this.uploadList = [];
129
-        this.number = 0;
130
-        this.$emit("input", this.listToString(this.fileList));
131
-        this.$modal.closeLoading();
132
-      }
133
-    },
134 115
     // 上传前loading加载
135 116
     handleBeforeUpload(file) {
136 117
       let isImg = false;
@@ -166,11 +147,42 @@ export default {
166 147
     handleExceed() {
167 148
       this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
168 149
     },
150
+    // 上传成功回调
151
+    handleUploadSuccess(res, file) {
152
+      if (res.code === 200) {
153
+        this.uploadList.push({ name: res.data.url, url: res.data.url });
154
+        this.uploadedSuccessfully();
155
+      } else {
156
+        this.number--;
157
+        this.$modal.closeLoading();
158
+        this.$modal.msgError(res.msg);
159
+        this.$refs.imageUpload.handleRemove(file);
160
+        this.uploadedSuccessfully();
161
+      }
162
+    },
163
+    // 删除图片
164
+    handleDelete(file) {
165
+      const findex = this.fileList.map(f => f.name).indexOf(file.name);
166
+      if (findex > -1) {
167
+        this.fileList.splice(findex, 1);
168
+        this.$emit("input", this.listToString(this.fileList));
169
+      }
170
+    },
169 171
     // 上传失败
170 172
     handleUploadError() {
171 173
       this.$modal.msgError("上传图片失败,请重试");
172 174
       this.$modal.closeLoading();
173 175
     },
176
+    // 上传结束处理
177
+    uploadedSuccessfully() {
178
+      if (this.number > 0 && this.uploadList.length === this.number) {
179
+        this.fileList = this.fileList.concat(this.uploadList);
180
+        this.uploadList = [];
181
+        this.number = 0;
182
+        this.$emit("input", this.listToString(this.fileList));
183
+        this.$modal.closeLoading();
184
+      }
185
+    },
174 186
     // 预览
175 187
     handlePictureCardPreview(file) {
176 188
       this.dialogImageUrl = file.url;
@@ -181,7 +193,9 @@ export default {
181 193
       let strs = "";
182 194
       separator = separator || ",";
183 195
       for (let i in list) {
184
-        strs += list[i].url + separator;
196
+        if (list[i].url) {
197
+          strs += list[i].url.replace(this.baseUrl, "") + separator;
198
+        }
185 199
       }
186 200
       return strs != '' ? strs.substr(0, strs.length - 1) : '';
187 201
     }