From d9f2543d30bfae34b13c6a8502f98bb28d243b6b Mon Sep 17 00:00:00 2001 From: yujialong <479214531@qq.com> Date: Thu, 30 Nov 2023 15:47:24 +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/api/index.js | 10 +- src/components/editor.js | 57 +- src/components/quill/index.vue | 71 +- src/components/upload/index.vue | 2 +- src/components/upload/upload.js | 2 +- src/pages/activity/manage/add/index.vue | 69 +- .../activity/manage/manage/noticeDetail.vue | 36 +- src/pages/course/add/index.vue | 776 +++++++++--------- src/pages/course/contentSettings/index.vue | 169 ++-- src/pages/information/addarticle/index.vue | 466 ++++++----- src/pages/match/add/step1.vue | 82 +- src/pages/match/add/step3.vue | 20 +- src/pages/match/manage/noticeDetail.vue | 319 +++---- src/pages/system/list/logo.vue | 320 ++++---- src/setting.js | 2 +- 15 files changed, 1190 insertions(+), 1211 deletions(-) diff --git a/src/api/index.js b/src/api/index.js index 3f089c5..1e26727 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -13,6 +13,8 @@ export default { getSchoolIdByToken : `users/users/data/user/getSchoolIdByToken`, deleteProfile : `users/users/userInfo/deleteProfile`, refreshPageNotification : `nakadai/message/refreshPageNotification`, + + getPlayAuth: `${uploadURL}oss/manage/getPlayAuth`, // 获取播放凭证 platformLogList: `nakadai/nakadai/log/platformLogList`, logNotification: `nakadai/nakadai/log/logNotification`, @@ -304,14 +306,6 @@ export default { editSubsection: `occupationlab/occupationlab/theoreticalCourseSubsection/editSubsection`, // 修改小节 getSubsection: `occupationlab/occupationlab/theoreticalCourseSubsection/getSubsection`, // 根据小节id获取预览文件地址 - // 阿里云文件/视频管理 - 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`, //查询城市 querySchoolData: `nakadai/nakadai/school/querySchool`, //根据学校名称查询学校信息 diff --git a/src/components/editor.js b/src/components/editor.js index 5925c41..0176b2a 100644 --- a/src/components/editor.js +++ b/src/components/editor.js @@ -1,7 +1,4 @@ -import Axios from 'axios' -import Api from '@/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', @@ -315,21 +312,25 @@ export default { powerpaste_allow_local_images: true, powerpaste_word_import: 'clean', powerpaste_html_import: 'clean', + 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) { @@ -347,23 +348,13 @@ export default { input.setAttribute("accept", ".mp4"); input.onchange = function(){ let file = this.files[0]; - 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/components/quill/index.vue b/src/components/quill/index.vue index 1be6cf2..3128580 100644 --- a/src/components/quill/index.vue +++ b/src/components/quill/index.vue @@ -15,14 +15,16 @@ :style="styles" v-loading="loading"> - - 点击上传 - + +
+ 点击上传 +
+
{ + // 把图片上传到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) @@ -264,21 +264,26 @@ export default { this.loading = true; }, // quill图片上传 - editorUploadSuccess (res) { + editorUploadSuccess (file) { // 获取富文本组件实例 - let quill = this.Quill; + let quill = this.Quill // 如果上传成功 - if (res.data.filesResult.fileUrl) { + if (file.url) { // 获取光标所在位置 - let length = quill.getSelection().index; + let lengths; + if (quill.getSelection() == null) { + lengths = 1 + } else { + lengths = quill.getSelection().index; + } // 插入图片,res为服务器返回的图片链接地址 - quill.insertEmbed(length, "image", res.data.filesResult.fileUrl); + quill.insertEmbed(lengths, 'image', file.url) // 调整光标到最后 - quill.setSelection(length + 1); + quill.setSelection(lengths + 1) } else { - util.successMsg("图片插入失败"); + this.$message.success('图片插入失败') } - this.loading = false; + this.loading = false }, // 类型切换回调 @@ -288,19 +293,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/components/upload/index.vue b/src/components/upload/index.vue index a33f14a..313635f 100644 --- a/src/components/upload/index.vue +++ b/src/components/upload/index.vue @@ -102,7 +102,7 @@ export default { this.uploading = true this.showFiles = false // 上传到阿里云oss - const { name } = await this.client.multipartUpload(file.name, file, { + const { name } = await this.client.multipartUpload(Date.now() + '.' + Util.getFileExt(file.name), file, { progress: this.handleProgress }); diff --git a/src/components/upload/upload.js b/src/components/upload/upload.js index 6960f2a..02566ed 100644 --- a/src/components/upload/upload.js +++ b/src/components/upload/upload.js @@ -17,7 +17,7 @@ export default { return new Promise(async (resolve, reject) => { try { // 上传到阿里云oss - const res = await client.multipartUpload(file.name, file); + const res = await client.multipartUpload(Date.now() + '.' + Util.getFileExt(file.name), file); resolve({ format: Util.getFileExt(file.name), name: file.name, diff --git a/src/pages/activity/manage/add/index.vue b/src/pages/activity/manage/add/index.vue index c961834..d3da267 100644 --- a/src/pages/activity/manage/add/index.vue +++ b/src/pages/activity/manage/add/index.vue @@ -16,15 +16,13 @@ + action="" + :http-request="handleRequest"> @@ -42,15 +40,13 @@ + action="" + :http-request="handleRequestLg"> @@ -154,23 +150,11 @@ :height="400" /> - - 点击上传 -
-

支持扩展名:.rar .zip .doc .docx .pdf .jpg...

-
-
+
@@ -191,6 +175,8 @@ import util from "@/libs/util"; import quill from "@/components/quill"; import Setting from "@/setting"; +import Upload from '@/components/upload'; +import Oss from '@/components/upload/upload.js' export default { data () { return { @@ -236,6 +222,7 @@ export default { }, components: { quill, + Upload }, watch: { // 监听信息是否有更改,有的话页面离开的时候要询问是否要保存 @@ -319,10 +306,12 @@ export default { beforeRemove (file, fileList) { return this.$confirm(`确定移除 ${file.name}?`); }, - handleRemove (file, fileList) { + handleRemove () { + Oss.del(this.form.coverUrl) this.form.coverUrl = '' }, - handleCarouselRemove (file, fileList) { + handleCarouselRemove () { + Oss.del(this.form.carouselUrl) this.form.carouselUrl = '' }, uploadError (err, file, fileList) { @@ -332,20 +321,27 @@ export default { center: true }) }, - uploadSuccess (res) { - this.form.coverUrl = res.data.filesResult.fileUrl + // 封面自定义上传 + async handleRequest ({ file }) { + this.form.coverUrl && Oss.del(this.form.coverUrl) + Oss.upload(file).then(res => { + this.form.coverUrl = res.url + }) }, - uploadLgSuccess (res) { - this.form.carouselUrl = res.data.filesResult.fileUrl + // 封面自定义上传 + async handleRequestLg ({ file }) { + this.form.carouselUrl && Oss.del(this.form.carouselUrl) + Oss.upload(file).then(res => { + this.form.carouselUrl = res.url + }) }, // 附件上传成功 - uploadAnnexSuccess (res) { - const file = res.data.filesResult - const url = file.fileUrl || file.fileId + uploadAnnexSuccess (file) { + const url = file.url const data = { activityId: this.form.id || '', - fileName: this.fileName, - name: this.fileName, + fileName: file.name, + name: file.name, filePath: url, url } @@ -366,6 +362,7 @@ export default { } }, handleAnnexRemove (file, fileList) { + Oss.del(file.url) this.form.activityFileList = fileList }, // 随机邀请码 diff --git a/src/pages/activity/manage/manage/noticeDetail.vue b/src/pages/activity/manage/manage/noticeDetail.vue index 44913f8..0c7b771 100644 --- a/src/pages/activity/manage/manage/noticeDetail.vue +++ b/src/pages/activity/manage/manage/noticeDetail.vue @@ -26,24 +26,10 @@ :height="400" />
- - 点击上传 -
-

支持扩展名:.rar .zip .doc .docx .pdf .jpg...

-
-
+
{ }).catch(res => { }) + Oss.del(file.url) const id = this.form.announcementAnnexList.find(e => e.fileName === file.name).id this.$post(`${this.api.delActivityAnnouncementAnnex}?id=${id}`).then(res => { }).catch(res => { }) } diff --git a/src/pages/course/add/index.vue b/src/pages/course/add/index.vue index 9586fb3..69e7b2c 100644 --- a/src/pages/course/add/index.vue +++ b/src/pages/course/add/index.vue @@ -1,385 +1,428 @@ @@ -395,7 +438,7 @@ $avatar-width: 104px; overflow: hidden; &:hover { - border-color: #409EFF; + border-color: #409eff; } .uploader-default { @@ -446,17 +489,18 @@ $avatar-width: 104px; /deep/ .d-inline-block { width: 216px; - .el-select, .el-input { + .el-select, + .el-input { width: 100%; } } .range-check { - display: inline-block; - margin: 0 0 10px 10px; + display: inline-block; + margin: 0 0 10px 10px; } /deep/.range-cas { - .el-tag { - display: none; - } + .el-tag { + display: none; + } } \ No newline at end of file diff --git a/src/pages/course/contentSettings/index.vue b/src/pages/course/contentSettings/index.vue index 6ba49aa..a2ca798 100644 --- a/src/pages/course/contentSettings/index.vue +++ b/src/pages/course/contentSettings/index.vue @@ -165,26 +165,15 @@ :close-on-click-modal="false"> - - 上传资源 -
视频请上传MP4格式,大小不超过30M;office文件大小不要超过10M
-
- + + +
- - 上传资源 - - + +
+
@@ -266,7 +243,7 @@ style="transform: scale(1) rotate(0deg);margin-top: -1px; max-height: 100%; max-width: 100%;"> -
@@ -282,6 +259,16 @@ id="fileIframe" :src="iframeSrc" frameborder="0"> +