| | |
| | | <template> |
| | | <div class="upload-file"> |
| | | <el-upload |
| | | multiple |
| | | :action="uploadFileUrl" |
| | | :before-upload="handleBeforeUpload" |
| | | :file-list="fileList" |
| | |
| | | <!-- 文件列表 --> |
| | | <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul"> |
| | | <li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList"> |
| | | <el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank"> |
| | | <el-link :href="`${file.url}`" :underline="false" target="_blank"> |
| | | <span class="el-icon-document"> {{ getFileName(file.name) }} </span> |
| | | </el-link> |
| | | <div class="ele-upload-list__item-content-action"> |
| | |
| | | |
| | | <script> |
| | | import { getToken } from "@/utils/auth"; |
| | | import { listByIds, delOss } from "@/api/system/oss"; |
| | | |
| | | export default { |
| | | name: "FileUpload", |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | number: 0, |
| | | uploadList: [], |
| | | baseUrl: process.env.VUE_APP_BASE_API, |
| | | uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址 |
| | | uploadFileUrl: process.env.VUE_APP_BASE_API + "/system/oss/upload", // 上传的图片服务器地址 |
| | | headers: { |
| | | Authorization: "Bearer " + getToken(), |
| | | }, |
| | |
| | | }, |
| | | watch: { |
| | | value: { |
| | | handler(val) { |
| | | async handler(val) { |
| | | if (val) { |
| | | let temp = 1; |
| | | // 首先将值转为数组 |
| | | 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.map(oss => { |
| | | oss = { name: oss.originalName, url: oss.url, ossId: oss.ossId }; |
| | | return oss; |
| | | }); |
| | | }) |
| | | } |
| | | // 然后将数组转为对象数组 |
| | | this.fileList = list.map(item => { |
| | | if (typeof item === "string") { |
| | | item = { name: item, url: item }; |
| | | } |
| | | item = { name: item.name, url: item.url, ossId: item.ossId }; |
| | | item.uid = item.uid || new Date().getTime() + temp++; |
| | | return item; |
| | | }); |
| | |
| | | return false; |
| | | }); |
| | | if (!isTypeOk) { |
| | | this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`); |
| | | this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`); |
| | | return false; |
| | | } |
| | | } |
| | |
| | | if (this.fileSize) { |
| | | const isLt = file.size / 1024 / 1024 < this.fileSize; |
| | | if (!isLt) { |
| | | this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`); |
| | | this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`); |
| | | return false; |
| | | } |
| | | } |
| | | this.$modal.loading("正在上传文件,请稍候..."); |
| | | this.number++; |
| | | return true; |
| | | }, |
| | | // 文件个数超出 |
| | | handleExceed() { |
| | | this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); |
| | | this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`); |
| | | }, |
| | | // 上传失败 |
| | | handleUploadError(err) { |
| | | this.$message.error("上传失败, 请重试"); |
| | | this.$modal.msgError("上传图片失败,请重试"); |
| | | this.$modal.closeLoading() |
| | | }, |
| | | // 上传成功回调 |
| | | handleUploadSuccess(res, file) { |
| | | this.$message.success("上传成功"); |
| | | this.fileList.push({ name: res.fileName, url: res.fileName }); |
| | | this.$emit("input", this.listToString(this.fileList)); |
| | | 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.listToString(this.fileList)); |
| | | this.$modal.closeLoading(); |
| | | } |
| | | } else { |
| | | this.$modal.msgError(res.msg); |
| | | this.$modal.closeLoading(); |
| | | } |
| | | }, |
| | | // 删除文件 |
| | | handleDelete(index) { |
| | | let ossId = this.fileList[index].ossId; |
| | | delOss(ossId); |
| | | this.fileList.splice(index, 1); |
| | | this.$emit("input", this.listToString(this.fileList)); |
| | | }, |
| | | // 获取文件名称 |
| | | getFileName(name) { |
| | | // 如果是url那么取最后的名字 如果不是直接返回 |
| | | if (name.lastIndexOf("/") > -1) { |
| | | return name.slice(name.lastIndexOf("/") + 1).toLowerCase(); |
| | | return name.slice(name.lastIndexOf("/") + 1); |
| | | } else { |
| | | return ""; |
| | | return name; |
| | | } |
| | | }, |
| | | // 对象转成指定字符串分隔 |
| | |
| | | let strs = ""; |
| | | separator = separator || ","; |
| | | for (let i in list) { |
| | | strs += list[i].url + separator; |
| | | strs += list[i].ossId + separator; |
| | | } |
| | | return strs != '' ? strs.substr(0, strs.length - 1) : ''; |
| | | } |
| | | } |
| | | return strs != "" ? strs.substr(0, strs.length - 1) : ""; |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | |