mirror of
https://gitee.com/huangge1199_admin/vue-pro.git
synced 2024-11-23 07:41:53 +08:00
富文本编辑器的 Editor 的图片上传报错的问题
This commit is contained in:
parent
63e632ceb7
commit
b6cb6469f1
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-upload
|
<el-upload
|
||||||
:action="uploadUrl"
|
:action="uploadFileUrl"
|
||||||
:before-upload="handleBeforeUpload"
|
:before-upload="handleBeforeUpload"
|
||||||
:on-success="handleUploadSuccess"
|
:on-success="handleUploadSuccess"
|
||||||
:on-error="handleUploadError"
|
:on-error="handleUploadError"
|
||||||
@ -10,7 +10,7 @@
|
|||||||
:headers="headers"
|
:headers="headers"
|
||||||
style="display: none"
|
style="display: none"
|
||||||
ref="upload"
|
ref="upload"
|
||||||
v-if="this.type == 'url'"
|
v-if="this.type === 'url'"
|
||||||
>
|
>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
<div class="editor" ref="editor" :style="styles"></div>
|
<div class="editor" ref="editor" :style="styles"></div>
|
||||||
@ -60,10 +60,8 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
|
uploadFileUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 请求地址
|
||||||
headers: {
|
headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
|
||||||
Authorization: "Bearer " + getAccessToken()
|
|
||||||
},
|
|
||||||
Quill: null,
|
Quill: null,
|
||||||
currentValue: "",
|
currentValue: "",
|
||||||
options: {
|
options: {
|
||||||
@ -126,7 +124,7 @@ export default {
|
|||||||
const editor = this.$refs.editor;
|
const editor = this.$refs.editor;
|
||||||
this.Quill = new Quill(editor, this.options);
|
this.Quill = new Quill(editor, this.options);
|
||||||
// 如果设置了上传地址则自定义图片上传事件
|
// 如果设置了上传地址则自定义图片上传事件
|
||||||
if (this.type == 'url') {
|
if (this.type === 'url') {
|
||||||
let toolbar = this.Quill.getModule("toolbar");
|
let toolbar = this.Quill.getModule("toolbar");
|
||||||
toolbar.addHandler("image", (value) => {
|
toolbar.addHandler("image", (value) => {
|
||||||
this.uploadType = "image";
|
this.uploadType = "image";
|
||||||
@ -172,11 +170,13 @@ export default {
|
|||||||
// 获取富文本组件实例
|
// 获取富文本组件实例
|
||||||
let quill = this.Quill;
|
let quill = this.Quill;
|
||||||
// 如果上传成功
|
// 如果上传成功
|
||||||
if (res.code == 200) {
|
// edit by 芋道源码
|
||||||
|
if (res.code === 200 || res.code === 0) {
|
||||||
// 获取光标所在位置
|
// 获取光标所在位置
|
||||||
let length = quill.getSelection().index;
|
let length = quill.getSelection().index;
|
||||||
// 插入图片 res.url为服务器返回的图片地址
|
// 插入图片 res.url为服务器返回的图片地址
|
||||||
quill.insertEmbed(length, "image", process.env.VUE_APP_BASE_API + res.fileName);
|
// edit by 芋道源码
|
||||||
|
quill.insertEmbed(length, "image", res.data);
|
||||||
// 调整光标到最后
|
// 调整光标到最后
|
||||||
quill.setSelection(length + 1);
|
quill.setSelection(length + 1);
|
||||||
} else {
|
} else {
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
<div class="component-upload-image">
|
<div class="component-upload-image">
|
||||||
<el-upload
|
<el-upload
|
||||||
multiple
|
multiple
|
||||||
:action="url"
|
:action="uploadFileUrl"
|
||||||
list-type="picture-card"
|
list-type="picture-card"
|
||||||
:on-success="handleUploadSuccess"
|
:on-success="handleUploadSuccess"
|
||||||
:before-upload="handleBeforeUpload"
|
:before-upload="handleBeforeUpload"
|
||||||
@ -76,7 +76,7 @@ export default {
|
|||||||
dialogImageUrl: "",
|
dialogImageUrl: "",
|
||||||
dialogVisible: false,
|
dialogVisible: false,
|
||||||
hideUpload: false,
|
hideUpload: false,
|
||||||
url: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 请求地址
|
uploadFileUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 请求地址
|
||||||
headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
|
headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
|
||||||
fileList: []
|
fileList: []
|
||||||
};
|
};
|
||||||
|
@ -1,68 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="component-upload-image">
|
|
||||||
<el-upload
|
|
||||||
:action="uploadImgUrl"
|
|
||||||
list-type="picture-card"
|
|
||||||
:on-success="handleUploadSuccess"
|
|
||||||
:before-upload="handleBeforeUpload"
|
|
||||||
:on-error="handleUploadError"
|
|
||||||
name="file"
|
|
||||||
:show-file-list="false"
|
|
||||||
:headers="headers"
|
|
||||||
style="display: inline-block; vertical-align: top"
|
|
||||||
>
|
|
||||||
<img v-if="value" :src="value" class="avatar" />
|
|
||||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
||||||
</el-upload>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { getAccessToken } from "@/utils/auth";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
|
|
||||||
headers: {
|
|
||||||
Authorization: "Bearer " + getAccessToken(),
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
value: {
|
|
||||||
type: String,
|
|
||||||
default: "",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleUploadSuccess(res) {
|
|
||||||
this.$emit("input", res.url);
|
|
||||||
this.loading.close();
|
|
||||||
},
|
|
||||||
handleBeforeUpload() {
|
|
||||||
this.loading = this.$loading({
|
|
||||||
lock: true,
|
|
||||||
text: "上传中",
|
|
||||||
background: "rgba(0, 0, 0, 0.7)",
|
|
||||||
});
|
|
||||||
},
|
|
||||||
handleUploadError() {
|
|
||||||
this.$message({
|
|
||||||
type: "error",
|
|
||||||
message: "上传失败",
|
|
||||||
});
|
|
||||||
this.loading.close();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.avatar {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
Loading…
Reference in New Issue
Block a user