| | |
| | | :limit="limit" |
| | | :on-error="handleUploadError" |
| | | :on-exceed="handleExceed" |
| | | name="file" |
| | | :on-remove="handleRemove" |
| | | ref="imageUpload" |
| | | :on-remove="handleDelete" |
| | | :show-file-list="true" |
| | | :headers="headers" |
| | | :file-list="fileList" |
| | |
| | | |
| | | <script> |
| | | import { getToken } from "@/utils/auth"; |
| | | import { delOss } from "@/api/system/oss"; |
| | | import { listByIds, delOss } from "@/api/system/oss"; |
| | | |
| | | export default { |
| | | props: { |
| | |
| | | }, |
| | | watch: { |
| | | value: { |
| | | handler(val) { |
| | | async handler(val) { |
| | | if (val) { |
| | | // 首先将值转为数组 |
| | | const list = Array.isArray(val) ? val : this.value.split(','); |
| | | let list; |
| | | if (Array.isArray(val)) { |
| | | list = val; |
| | | } else { |
| | | await listByIds(val).then(res => { |
| | | list = res.data; |
| | | }) |
| | | } |
| | | // 然后将数组转为对象数组 |
| | | this.fileList = list.map(item => { |
| | | // 字符串回显处理 如果此处存的是url可直接回显 如果存的是id需要调用接口查出来 |
| | | if (typeof item === "string") { |
| | | item = { name: item, url: item }; |
| | | } else { |
| | | // 此处name使用ossId 防止删除出现重名 |
| | | item = { name: item.ossId, url: item.url, ossId: item.ossId }; |
| | | } |
| | | // 此处name使用ossId 防止删除出现重名 |
| | | item = { name: item.ossId, url: item.url, ossId: item.ossId }; |
| | | return item; |
| | | }); |
| | | } else { |
| | |
| | | }, |
| | | }, |
| | | methods: { |
| | | // 删除图片 |
| | | handleRemove(file, fileList) { |
| | | const findex = this.fileList.map(f => f.name).indexOf(file.name); |
| | | if(findex > -1) { |
| | | let ossId = this.fileList[findex].ossId; |
| | | delOss(ossId); |
| | | this.fileList.splice(findex, 1); |
| | | this.$emit("input", this.fileList); |
| | | } |
| | | }, |
| | | // 上传成功回调 |
| | | handleUploadSuccess(res) { |
| | | if (res.code == 200) { |
| | | this.uploadList.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId }); |
| | | if (this.uploadList.length === this.number) { |
| | | this.fileList = this.fileList.concat(this.uploadList); |
| | | this.uploadList = []; |
| | | this.number = 0; |
| | | this.$emit("input", this.fileList); |
| | | this.$modal.closeLoading(); |
| | | } |
| | | } else { |
| | | this.$modal.msgError(res.msg); |
| | | this.$modal.closeLoading(); |
| | | } |
| | | }, |
| | | // 上传前loading加载 |
| | | handleBeforeUpload(file) { |
| | | let isImg = false; |
| | |
| | | handleExceed() { |
| | | this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`); |
| | | }, |
| | | // 上传成功回调 |
| | | handleUploadSuccess(res, file) { |
| | | if (res.code === 200) { |
| | | this.uploadList.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId }); |
| | | this.uploadedSuccessfully(); |
| | | } else { |
| | | this.number--; |
| | | this.$modal.closeLoading(); |
| | | this.$modal.msgError(res.msg); |
| | | this.$refs.imageUpload.handleRemove(file); |
| | | this.uploadedSuccessfully(); |
| | | } |
| | | }, |
| | | // 删除图片 |
| | | handleDelete(file) { |
| | | const findex = this.fileList.map(f => f.name).indexOf(file.name); |
| | | if(findex > -1) { |
| | | let ossId = this.fileList[findex].ossId; |
| | | delOss(ossId); |
| | | this.fileList.splice(findex, 1); |
| | | this.$emit("input", this.listToString(this.fileList)); |
| | | } |
| | | }, |
| | | // 上传失败 |
| | | handleUploadError(res) { |
| | | this.$modal.msgError("上传图片失败,请重试"); |
| | | this.$modal.closeLoading(); |
| | | }, |
| | | // 上传结束处理 |
| | | uploadedSuccessfully() { |
| | | if (this.number > 0 && this.uploadList.length === this.number) { |
| | | this.fileList = this.fileList.concat(this.uploadList); |
| | | this.uploadList = []; |
| | | this.number = 0; |
| | | this.$emit("input", this.listToString(this.fileList)); |
| | | this.$modal.closeLoading(); |
| | | } |
| | | }, |
| | | // 预览 |
| | | handlePictureCardPreview(file) { |
| | | this.dialogImageUrl = file.url; |
| | | this.dialogVisible = true; |
| | | }, |
| | | // 对象转成指定字符串分隔 |
| | | listToString(list, separator) { |
| | | let strs = ""; |
| | | separator = separator || ","; |
| | | for (let i in list) { |
| | | if (list[i].ossId) { |
| | | strs += list[i].ossId + separator; |
| | | } |
| | | } |
| | | return strs != "" ? strs.substr(0, strs.length - 1) : ""; |
| | | } |
| | | } |
| | | }; |
| | | </script> |