mirror of
				https://gitee.com/hhyykk/ipms-sjy.git
				synced 2025-10-31 10:18:42 +08:00 
			
		
		
		
	富文本编辑器的 Editor 的图片上传报错的问题
This commit is contained in:
		| @@ -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 { | ||||
|   | ||||
| @@ -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: [] | ||||
|     }; | ||||
|   | ||||
| @@ -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> | ||||
		Reference in New Issue
	
	Block a user
	 YunaiV
					YunaiV