富文本编辑器的 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> <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 {

View File

@ -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: []
}; };

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>