作者 RuoYi

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

@@ -12,7 +12,7 @@ @@ -12,7 +12,7 @@
12 :show-file-list="false" 12 :show-file-list="false"
13 :headers="headers" 13 :headers="headers"
14 class="upload-file-uploader" 14 class="upload-file-uploader"
15 - ref="upload" 15 + ref="fileUpload"
16 > 16 >
17 <!-- 上传按钮 --> 17 <!-- 上传按钮 -->
18 <el-button size="mini" type="primary">选取文件</el-button> 18 <el-button size="mini" type="primary">选取文件</el-button>
@@ -151,14 +151,16 @@ export default { @@ -151,14 +151,16 @@ export default {
151 this.$modal.closeLoading() 151 this.$modal.closeLoading()
152 }, 152 },
153 // 上传成功回调 153 // 上传成功回调
154 - handleUploadSuccess(res) {  
155 - this.uploadList.push({ name: res.fileName, url: res.fileName });  
156 - if (this.uploadList.length === this.number) {  
157 - this.fileList = this.fileList.concat(this.uploadList);  
158 - this.uploadList = [];  
159 - this.number = 0;  
160 - this.$emit("input", this.listToString(this.fileList)); 154 + handleUploadSuccess(res, file) {
  155 + if (res.code === 200) {
  156 + this.uploadList.push({ name: res.fileName, url: res.fileName });
  157 + this.uploadedSuccessfully();
  158 + } else {
  159 + this.number--;
161 this.$modal.closeLoading(); 160 this.$modal.closeLoading();
  161 + this.$modal.msgError(res.msg);
  162 + this.$refs.fileUpload.handleRemove(file);
  163 + this.uploadedSuccessfully();
162 } 164 }
163 }, 165 },
164 // 删除文件 166 // 删除文件
@@ -166,6 +168,16 @@ export default { @@ -166,6 +168,16 @@ export default {
166 this.fileList.splice(index, 1); 168 this.fileList.splice(index, 1);
167 this.$emit("input", this.listToString(this.fileList)); 169 this.$emit("input", this.listToString(this.fileList));
168 }, 170 },
  171 + // 上传结束处理
  172 + uploadedSuccessfully() {
  173 + if (this.number > 0 && this.uploadList.length === this.number) {
  174 + this.fileList = this.fileList.concat(this.uploadList);
  175 + this.uploadList = [];
  176 + this.number = 0;
  177 + this.$emit("input", this.listToString(this.fileList));
  178 + this.$modal.closeLoading();
  179 + }
  180 + },
169 // 获取文件名称 181 // 获取文件名称
170 getFileName(name) { 182 getFileName(name) {
171 if (name.lastIndexOf("/") > -1) { 183 if (name.lastIndexOf("/") > -1) {
@@ -9,8 +9,8 @@ @@ -9,8 +9,8 @@
9 :limit="limit" 9 :limit="limit"
10 :on-error="handleUploadError" 10 :on-error="handleUploadError"
11 :on-exceed="handleExceed" 11 :on-exceed="handleExceed"
12 - name="file"  
13 - :on-remove="handleRemove" 12 + ref="imageUpload"
  13 + :on-remove="handleDelete"
14 :show-file-list="true" 14 :show-file-list="true"
15 :headers="headers" 15 :headers="headers"
16 :file-list="fileList" 16 :file-list="fileList"
@@ -117,25 +117,6 @@ export default { @@ -117,25 +117,6 @@ export default {
117 }, 117 },
118 }, 118 },
119 methods: { 119 methods: {
120 - // 删除图片  
121 - handleRemove(file, fileList) {  
122 - const findex = this.fileList.map(f => f.name).indexOf(file.name);  
123 - if(findex > -1) {  
124 - this.fileList.splice(findex, 1);  
125 - this.$emit("input", this.listToString(this.fileList));  
126 - }  
127 - },  
128 - // 上传成功回调  
129 - handleUploadSuccess(res) {  
130 - this.uploadList.push({ name: res.fileName, url: res.fileName });  
131 - if (this.uploadList.length === this.number) {  
132 - this.fileList = this.fileList.concat(this.uploadList);  
133 - this.uploadList = [];  
134 - this.number = 0;  
135 - this.$emit("input", this.listToString(this.fileList));  
136 - this.$modal.closeLoading();  
137 - }  
138 - },  
139 // 上传前loading加载 120 // 上传前loading加载
140 handleBeforeUpload(file) { 121 handleBeforeUpload(file) {
141 let isImg = false; 122 let isImg = false;
@@ -171,11 +152,42 @@ export default { @@ -171,11 +152,42 @@ export default {
171 handleExceed() { 152 handleExceed() {
172 this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`); 153 this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
173 }, 154 },
  155 + // 上传成功回调
  156 + handleUploadSuccess(res, file) {
  157 + if (res.code === 200) {
  158 + this.uploadList.push({ name: res.fileName, url: res.fileName });
  159 + this.uploadedSuccessfully();
  160 + } else {
  161 + this.number--;
  162 + this.$modal.closeLoading();
  163 + this.$modal.msgError(res.msg);
  164 + this.$refs.imageUpload.handleRemove(file);
  165 + this.uploadedSuccessfully();
  166 + }
  167 + },
  168 + // 删除图片
  169 + handleDelete(file) {
  170 + const findex = this.fileList.map(f => f.name).indexOf(file.name);
  171 + if(findex > -1) {
  172 + this.fileList.splice(findex, 1);
  173 + this.$emit("input", this.listToString(this.fileList));
  174 + }
  175 + },
174 // 上传失败 176 // 上传失败
175 handleUploadError() { 177 handleUploadError() {
176 this.$modal.msgError("上传图片失败,请重试"); 178 this.$modal.msgError("上传图片失败,请重试");
177 this.$modal.closeLoading(); 179 this.$modal.closeLoading();
178 }, 180 },
  181 + // 上传结束处理
  182 + uploadedSuccessfully() {
  183 + if (this.number > 0 && this.uploadList.length === this.number) {
  184 + this.fileList = this.fileList.concat(this.uploadList);
  185 + this.uploadList = [];
  186 + this.number = 0;
  187 + this.$emit("input", this.listToString(this.fileList));
  188 + this.$modal.closeLoading();
  189 + }
  190 + },
179 // 预览 191 // 预览
180 handlePictureCardPreview(file) { 192 handlePictureCardPreview(file) {
181 this.dialogImageUrl = file.url; 193 this.dialogImageUrl = file.url;
@@ -186,7 +198,9 @@ export default { @@ -186,7 +198,9 @@ export default {
186 let strs = ""; 198 let strs = "";
187 separator = separator || ","; 199 separator = separator || ",";
188 for (let i in list) { 200 for (let i in list) {
189 - strs += list[i].url.replace(this.baseUrl, "") + separator; 201 + if (list[i].url) {
  202 + strs += list[i].url.replace(this.baseUrl, "") + separator;
  203 + }
190 } 204 }
191 return strs != '' ? strs.substr(0, strs.length - 1) : ''; 205 return strs != '' ? strs.substr(0, strs.length - 1) : '';
192 } 206 }