|
|
@@ -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
|
}
|