富文本编辑器的 Editor 的图片上传报错的问题

This commit is contained in:
YunaiV 2022-05-11 12:35:42 +08:00
parent 63e632ceb7
commit b6cb6469f1
3 changed files with 11 additions and 79 deletions

View File

@ -1,7 +1,7 @@
<template>
<div>
<el-upload
:action="uploadUrl"
:action="uploadFileUrl"
:before-upload="handleBeforeUpload"
:on-success="handleUploadSuccess"
:on-error="handleUploadError"
@ -10,7 +10,7 @@
:headers="headers"
style="display: none"
ref="upload"
v-if="this.type == 'url'"
v-if="this.type === 'url'"
>
</el-upload>
<div class="editor" ref="editor" :style="styles"></div>
@ -60,10 +60,8 @@ export default {
},
data() {
return {
uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", //
headers: {
Authorization: "Bearer " + getAccessToken()
},
uploadFileUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", //
headers: { Authorization: "Bearer " + getAccessToken() }, //
Quill: null,
currentValue: "",
options: {
@ -126,7 +124,7 @@ export default {
const editor = this.$refs.editor;
this.Quill = new Quill(editor, this.options);
//
if (this.type == 'url') {
if (this.type === 'url') {
let toolbar = this.Quill.getModule("toolbar");
toolbar.addHandler("image", (value) => {
this.uploadType = "image";
@ -172,11 +170,13 @@ export default {
//
let quill = this.Quill;
//
if (res.code == 200) {
// edit by
if (res.code === 200 || res.code === 0) {
//
let length = quill.getSelection().index;
// 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);
} else {

View File

@ -2,7 +2,7 @@
<div class="component-upload-image">
<el-upload
multiple
:action="url"
:action="uploadFileUrl"
list-type="picture-card"
:on-success="handleUploadSuccess"
:before-upload="handleBeforeUpload"
@ -76,7 +76,7 @@ export default {
dialogImageUrl: "",
dialogVisible: 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() }, //
fileList: []
};

View File

@ -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>