From 392d258acca5f6bef5ed5f8677ae3381544a1988 Mon Sep 17 00:00:00 2001 From: yujialong <479214531@qq.com> Date: Tue, 28 Nov 2023 15:14:41 +0800 Subject: [PATCH] =?UTF-8?q?oss=E5=85=A8=E9=83=A8=E6=9B=BF=E6=8D=A2?= =?UTF-8?q?=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/quill/index.vue | 63 ++++++++------- src/utils/api.js | 11 +-- src/utils/editor.js | 90 ++++++---------------- src/views/information/addArticle/index.vue | 7 +- src/views/serve/projectAdd.vue | 9 ++- 5 files changed, 64 insertions(+), 116 deletions(-) diff --git a/src/components/quill/index.vue b/src/components/quill/index.vue index 0904131..5b3d283 100644 --- a/src/components/quill/index.vue +++ b/src/components/quill/index.vue @@ -15,14 +15,16 @@
- - 点击上传 - + +
+ 点击上传 +
+ { + // 把图片上传到oss，不然会直接把base64存到数据库 + Oss.upload(file).then(res => { var range = ins.getSelection() if (range) { // 在当前光标位置插入图片 - ins.insertEmbed(range.index, 'image', res.data.filesResult.fileUrl) + ins.insertEmbed(range.index, 'image', res.url) // 将光标移动到图片后面 ins.setSelection(range.index + 1) } - }).catch(res => { }) + }) }); } }, false) @@ -254,11 +261,11 @@ export default { this.loading = true }, // quill图片上传 - editorUploadSuccess (res) { + editorUploadSuccess (file) { // 获取富文本组件实例 let quill = this.Quill // 如果上传成功 - if (res.data.filesResult.fileUrl) { + if (file.url) { // 获取光标所在位置 let lengths; if (quill.getSelection() == null) { @@ -267,7 +274,7 @@ export default { lengths = quill.getSelection().index; } // 插入图片，res为服务器返回的图片链接地址 - quill.insertEmbed(lengths, 'image', res.data.filesResult.fileUrl) + quill.insertEmbed(lengths, 'image', file.url) // 调整光标到最后 quill.setSelection(lengths + 1) } else { @@ -283,19 +290,9 @@ export default { // markdown图片上传 imgAdd (pos, $file) { let $vm = this.$refs.md - // 第一步.将图片上传到服务器. - const formData = new FormData(); - formData.append('file', $file); - axios({ - url: this.api.fileupload, - method: 'post', - data: formData, - headers: { - token: this.token, - 'Content-Type': 'multipart/form-data' - }, - }).then((res) => { - $vm.$img2Url(pos, res.data.data.filesResult.fileUrl); + // 将图片上传到oss + Oss.upload($file).then(res => { + $vm.$img2Url(pos, res.url); }) }, diff --git a/src/utils/api.js b/src/utils/api.js index 812a036..a88e23c 100644 --- a/src/utils/api.js +++ b/src/utils/api.js @@ -12,6 +12,9 @@ export default { getUserRolesPermissionMenu: `users/users/user-role/getUserRolesPermissionMenu`, deleteProfile : `users/users/userInfo/deleteProfile`, refreshPageNotification : `nakadai/message/refreshPageNotification`, + + // 阿里云文件/视频管理 + getPlayAuth: `${uploadURL}oss/manage/getPlayAuth`, // 获取播放凭证 staffTemplate: `http://www.huorantech.cn/template/%E6%89%B9%E9%87%8F%E5%AF%BC%E5%85%A5%E5%91%98%E5%B7%A5%E6%A8%A1%E6%9D%BF.xlsx`, // 后台账号模板 @@ -208,14 +211,6 @@ export default { queryArticleByCondition: `occupationlab/occupationlab/information/article/queryArticleByCondition`, articleSort: `occupationlab/occupationlab/information/article/articleSort`, - // 阿里云文件/视频管理 - fileDeletion: `${uploadURL}oss/manage/fileDeletion`, // 删除OSS文件 - fileupload: `${uploadURL}oss/manage/fileupload`, // 文件上传 - getPlayAuth: `${uploadURL}oss/manage/getPlayAuth`, // 获取播放凭证 - removeMoreVideo: `${uploadURL}oss/manage/removeMoreVideo`, // 批量删除视频文件 - removeVideo: `${uploadURL}oss/manage/removeVideo`, // 删除视频文件 - fileUploadNakadai: `${host}nakadai/nakadai/oss/fileUpload`, - queryProvince: `nakadai/nakadai/province/queryProvince`, //查询省份 queryCity: `nakadai/nakadai/city/queryCity`, //查询城市 diff --git a/src/utils/editor.js b/src/utils/editor.js index 69bdab2..baee08b 100644 --- a/src/utils/editor.js +++ b/src/utils/editor.js @@ -1,8 +1,6 @@ -import Axios from 'axios' -import Api from '@/utils/api' -import Setting from '@/setting' -import Util from '@/libs/util' +import Oss from '@/components/upload/upload.js' import { Loading } from 'element-ui' + export default { //skin:'oxide-dark', language:'zh_CN', @@ -302,57 +300,25 @@ export default { powerpaste_allow_local_images: true, powerpaste_word_import: 'clean', powerpaste_html_import: 'clean', - extraPlugins: 'uploadimage', - imageUploadUrl: Api.fileUploadNakadai, - init_instance_callback: function (editor) { - editor.on('paste', (evt) => { - // 监听粘贴事件 - // 实现图片粘贴上传 - const items = (evt.clipboardData || window.clipboardData).items - if (items[0].type.indexOf('image') !== -1) { - const file = items[0].getAsFile() - const form = new FormData() - form.append('file', file) - // 自定义上传图片的方法 - Axios({ - method: 'post', - url: Api.fileUploadNakadai, - data: form, - headers: { - 'Content-Type': 'multipart/form-data', - token: Util.local.get(Setting.tokenKey) - }, - }).then(({ data }) => { - // 使用指令，在当前鼠标标光的位置插入元素 - // img元素的src就是远程图片的链接地址 - editor.execCommand( - "mceReplaceContent", - true, - `` - ); - }).catch(res => {}) - // 阻止默认事件，防止粘贴的图片进入富文本编辑器中 - evt.preventDefault(); - } else { - console.log('粘贴的不是图片，不能上传') + urlconverter_callback: (url, node, onSave, name) => { + if (node === 'img' && url.startsWith('blob:')) { + // Do some custom URL conversion + tinymce.activeEditor && tinymce.activeEditor.uploadImages() } - }) - }, + // Return new URL + return url + }, // 自定义上传 images_upload_handler: function (blobInfo, succFun, failFun) { - const form = new FormData() - form.append('file', blobInfo.blob()) - Axios({ - method: 'post', - url: Api.fileUploadNakadai, - data: form, - headers: { - 'Content-Type': 'multipart/form-data', - token: Util.local.get(Setting.tokenKey) - }, - }).then(({ data }) => { - succFun(data.filesResult.fileUrl) - }).catch(res => {}) + const blob = blobInfo.blob() + // blob转换为file + const file = new File([blob], blobInfo.filename(), { + type: 'application/json', + lastModified: Date.now() + }); + Oss.upload(file).then(res => { + succFun(res.url) + }) }, //自定义文件选择器的回调内容 此方法只有在点击上方图片按钮才会触发 file_picker_callback: function (callback, value, meta) { @@ -373,20 +339,12 @@ export default { let fd = new FormData(); fd.append("file", file); const load = Loading.service() - Axios({ - method: 'post', - url: Api.fileUploadNakadai, - data: fd, - headers: { - 'Content-Type': 'multipart/form-data', - token: Util.local.get(Setting.tokenKey) - }, - }).then(({ data }) => { - load.close() - callback(data.filesResult.fileUrl) - }).catch(res => { - load.close() - }) + Oss.upload(file).then(res => { + load.close() + callback(res.url) + }).catch(e => { + load.close() + }) } //触发点击 input.click(); diff --git a/src/views/information/addArticle/index.vue b/src/views/information/addArticle/index.vue index 6fec251..cfe0c2c 100644 --- a/src/views/information/addArticle/index.vue +++ b/src/views/information/addArticle/index.vue @@ -179,12 +179,7 @@ export default { }) }, uploadSuccess (res, file, fileList) { - if (this.form.coverUrl) { - let fileName = this.coverUrl.replace("https://liuwanr.oss-cn-shenzhen.aliyuncs.com/", ""); - this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => { - }).catch(res => { - }); - } + Oss.del(this.form.coverUrl) this.form.coverUrl = res.data.filesResult.fileUrl; }, uploadError (err, file, fileList) { diff --git a/src/views/serve/projectAdd.vue b/src/views/serve/projectAdd.vue index 57067ba..b1ee2a1 100644 --- a/src/views/serve/projectAdd.vue +++ b/src/views/serve/projectAdd.vue @@ -95,7 +95,8 @@ :type.sync="projectManage.experimentDescriptionType" radio :minHeight="150" - :height="150" /> + :height="150" + :index="1" /> @@ -189,7 +190,8 @@ elseRead="true" v-model="scope.row.experimentalRequirements" :minHeight="100" - :height="100" /> + :height="100" + :index="2" /> + :height="400" + :index="3" />