| | |
|---|
| | | <div> |
|---|
| | | <el-upload |
|---|
| | | :action="uploadUrl" |
|---|
| | | :before-upload="handleBeforeUpload" |
|---|
| | | :on-success="handleUploadSuccess" |
|---|
| | | :on-error="handleUploadError" |
|---|
| | | name="file" |
|---|
| | |
|---|
| | | type: Boolean, |
|---|
| | | default: false, |
|---|
| | | }, |
|---|
| | | // 上传文件大小限制(MB) |
|---|
| | | fileSize: { |
|---|
| | | type: Number, |
|---|
| | | default: 5, |
|---|
| | | }, |
|---|
| | | /* 类型（base64格式、url格式） */ |
|---|
| | | type: { |
|---|
| | | type: String, |
|---|
| | |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址 |
|---|
| | | uploadUrl: process.env.VUE_APP_BASE_API + "/system/oss/upload", // 上传的图片服务器地址 |
|---|
| | | headers: { |
|---|
| | | Authorization: "Bearer " + getToken() |
|---|
| | | }, |
|---|
| | |
|---|
| | | this.quill.format("image", false); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | toolbar.addHandler("video", (value) => { |
|---|
| | | this.uploadType = "video"; |
|---|
| | | if (value) { |
|---|
| | | this.$refs.upload.$children[0].$refs.input.click(); |
|---|
| | | } else { |
|---|
| | | this.quill.format("video", false); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | this.Quill.pasteHTML(this.currentValue); |
|---|
| | | this.Quill.on("text-change", (delta, oldDelta, source) => { |
|---|
| | |
|---|
| | | this.$emit("on-editor-change", eventName, ...args); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | // 上传前校检格式和大小 |
|---|
| | | handleBeforeUpload(file) { |
|---|
| | | // 校检文件大小 |
|---|
| | | if (this.fileSize) { |
|---|
| | | const isLt = file.size / 1024 / 1024 < this.fileSize; |
|---|
| | | if (!isLt) { |
|---|
| | | this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`); |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return true; |
|---|
| | | }, |
|---|
| | | handleUploadSuccess(res, file) { |
|---|
| | | // 获取富文本组件实例 |
|---|
| | | let quill = this.Quill; |
|---|
| | |
|---|
| | | // 获取光标所在位置 |
|---|
| | | let length = quill.getSelection().index; |
|---|
| | | // 插入图片 res.url为服务器返回的图片地址 |
|---|
| | | quill.insertEmbed(length, "image", process.env.VUE_APP_BASE_API + res.data.fileName); |
|---|
| | | quill.insertEmbed(length, "image", res.data.url); |
|---|
| | | // 调整光标到最后 |
|---|
| | | quill.setSelection(length + 1); |
|---|
| | | } else { |
|---|
| | | this.$message.error("图片插入失败"); |
|---|
| | | this.$message.error(res.msg); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | handleUploadError() { |
|---|
