| | |
| | | <template> |
| | | <div class="component-upload-image"> |
| | | <el-upload |
| | | multiple |
| | | :action="uploadImgUrl" |
| | | list-type="picture-card" |
| | | :on-success="handleUploadSuccess" |
| | |
| | | > |
| | | <i class="el-icon-plus"></i> |
| | | </el-upload> |
| | | |
| | | |
| | | <!-- 上传提示 --> |
| | | <div class="el-upload__tip" slot="tip" v-if="showTip"> |
| | | 请上传 |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | number: 0, |
| | | uploadList: [], |
| | | dialogImageUrl: "", |
| | | dialogVisible: false, |
| | | hideUpload: false, |
| | |
| | | // 上传成功回调 |
| | | handleUploadSuccess(res) { |
| | | 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(); |
| | | this.uploadList.push({ name: res.data.fileName, url: res.data.url }); |
| | | 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.$message.error(res.msg); |
| | | this.loading.close(); |
| | | this.$modal.msgError(res.msg); |
| | | this.$modal.closeLoading(); |
| | | } |
| | | }, |
| | | // 上传前loading加载 |
| | |
| | | } |
| | | |
| | | if (!isImg) { |
| | | 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.loading = this.$loading({ |
| | | lock: true, |
| | | text: "上传中", |
| | | background: "rgba(0, 0, 0, 0.7)", |
| | | }); |
| | | this.$modal.loading("正在上传图片,请稍候..."); |
| | | this.number++; |
| | | }, |
| | | // 文件个数超出 |
| | | handleExceed() { |
| | | this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); |
| | | this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`); |
| | | }, |
| | | // 上传失败 |
| | | handleUploadError(res) { |
| | | this.$message({ |
| | | type: "error", |
| | | message: "上传失败", |
| | | }); |
| | | this.loading.close(); |
| | | this.$modal.msgError("上传图片失败,请重试"); |
| | | this.$modal.closeLoading(); |
| | | }, |
| | | // 预览 |
| | | handlePictureCardPreview(file) { |