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