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

YunaiV
1 parent 63e632ce
Showing 3 changed files with 11 additions and 79 deletions
yudao-ui-admin/src/components/Editor/index.vue
yudao-ui-admin/src/components/ImageUpload/index.vue
yudao-ui-admin/src/components/UploadImage/index.vue
 <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 {
@@ -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: []
     };
-<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>