| | |
|---|
| | | > |
|---|
| | | <i class="el-icon-plus"></i> |
|---|
| | | </el-upload> |
|---|
| | | |
|---|
| | | |
|---|
| | | <!-- 上传提示 --> |
|---|
| | | <div class="el-upload__tip" slot="tip" v-if="showTip"> |
|---|
| | | 请上传 |
|---|
| | |
|---|
| | | dialogVisible: false, |
|---|
| | | hideUpload: false, |
|---|
| | | baseUrl: process.env.VUE_APP_BASE_API, |
|---|
| | | uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址 |
|---|
| | | uploadImgUrl: process.env.VUE_APP_BASE_API + "/system/oss/upload", // 上传的图片服务器地址 |
|---|
| | | headers: { |
|---|
| | | Authorization: "Bearer " + getToken(), |
|---|
| | | }, |
|---|
| | |
|---|
| | | // 然后将数组转为对象数组 |
|---|
| | | this.fileList = list.map(item => { |
|---|
| | | if (typeof item === "string") { |
|---|
| | | if (item.indexOf(this.baseUrl) === -1) { |
|---|
| | | item = { name: this.baseUrl + item, url: this.baseUrl + item }; |
|---|
| | | } else { |
|---|
| | | item = { name: item, url: item }; |
|---|
| | | } |
|---|
| | | item = { name: item, url: item }; |
|---|
| | | } |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | |
|---|
| | | methods: { |
|---|
| | | // 删除图片 |
|---|
| | | handleRemove(file, fileList) { |
|---|
| | | const findex = this.fileList.indexOf(file.name); |
|---|
| | | this.fileList.splice(findex, 1); |
|---|
| | | this.$emit("input", this.listToString(this.fileList)); |
|---|
| | | const findex = this.fileList.map(f => f.name).indexOf(file.name); |
|---|
| | | if(findex > -1) { |
|---|
| | | this.fileList.splice(findex, 1); |
|---|
| | | this.$emit("input", this.listToString(this.fileList)); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // 上传成功回调 |
|---|
| | | handleUploadSuccess(res) { |
|---|
| | | this.fileList.push({ name: res.data.fileName, url: res.data.fileName }); |
|---|
| | | this.$emit("input", this.listToString(this.fileList)); |
|---|
| | | this.loading.close(); |
|---|
| | | if (res.code == 200) { |
|---|
| | | this.fileList.push({ name: res.data.fileName, url: res.data.url }); |
|---|
| | | this.$emit("input", this.listToString(this.fileList)); |
|---|
| | | this.loading.close(); |
|---|
| | | } else { |
|---|
| | | this.$message.error(res.msg); |
|---|
| | | this.loading.close(); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // 上传前loading加载 |
|---|
| | | handleBeforeUpload(file) { |
|---|
| | |
|---|
| | | if (file.name.lastIndexOf(".") > -1) { |
|---|
| | | fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1); |
|---|
| | | } |
|---|
| | | isImg = this.fileType.some(type => { |
|---|
| | | isImg = this.fileType.some((type) => { |
|---|
| | | if (file.type.indexOf(type) > -1) return true; |
|---|
| | | if (fileExtension && fileExtension.indexOf(type) > -1) return true; |
|---|
| | | return false; |
|---|
| | |
|---|
| | | this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); |
|---|
| | | }, |
|---|
| | | // 上传失败 |
|---|
| | | handleUploadError() { |
|---|
| | | handleUploadError(res) { |
|---|
| | | this.$message({ |
|---|
| | | type: "error", |
|---|
| | | message: "上传失败", |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | ::v-deep .el-list-enter, .el-list-leave-active { |
|---|
| | | opacity: 0; |
|---|
| | | transform: translateY(0); |
|---|
| | | opacity: 0; |
|---|
| | | transform: translateY(0); |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | |
|---|
