huoran
/
FE_middlePlatform_server
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 14 Wiki Activity

oss全部替换完成

Browse Source
dev_review
yujialong 1 year ago
parent 4036589adb
commit 392d258acc
5 changed files with 64 additions and 116 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 59
      src/components/quill/index.vue
  2. 11
      src/utils/api.js
  3. 82
      src/utils/editor.js
  4. 7
      src/views/information/addArticle/index.vue
  5. 9
      src/views/serve/projectAdd.vue

59
src/components/quill/index.vue
Unescape View File

@ -15,14 +15,16 @@
<div ref="editor" <div ref="editor"
:style="styles" :style="styles"
v-loading="loading"></div> v-loading="loading"></div>
<el-upload :headers="headers" <Upload :max-size="1000"
:action="this.api.fileupload" :limit="100"
:before-upload="beforeUpload" @beforeUpload="beforeUpload"
:on-success="editorUploadSuccess" @onSuccess="editorUploadSuccess"
style="display: none"> style="display: none">
<el-button class="editorUpload" <div slot="trigger">
<el-button :id="'editorUpload' + index"
type="primary">点击上传</el-button> type="primary">点击上传</el-button>
</el-upload> </div>
</Upload>
</div> </div>
<mavon-editor class="md" <mavon-editor class="md"
v-model="mdVal" v-model="mdVal"
@ -44,10 +46,13 @@ import toolbarOptions from './options'
import axios from 'axios' import axios from 'axios'
import { mavonEditor } from 'mavon-editor' import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css' import 'mavon-editor/dist/css/index.css'
import Upload from '@/components/upload';
import Oss from '@/components/upload/upload.js'
export default { export default {
name: 'quill', name: 'quill',
components: { components: {
Upload,
mavonEditor mavonEditor
}, },
props: { props: {
@ -80,6 +85,11 @@ export default {
elseRead: { elseRead: {
type: String, default: 'false' type: String, default: 'false'
}, },
// 当前富文本的索引。一个页面引入多个富文本的时候会无法获取到对应的实例，所以通过在父级存储实例的方式来保存
index: {
type: Number,
default: 0
},
// 是否需要编辑器切换 // 是否需要编辑器切换
radio: { radio: {
type: Boolean, type: Boolean,
@ -92,6 +102,7 @@ export default {
}, },
}, },
data () { data () {
const that = this
return { return {
headers: { headers: {
token: sessionStorage.getItem('token') token: sessionStorage.getItem('token')
@ -111,7 +122,7 @@ export default {
'image': function (value) { 'image': function (value) {
if (value) { if (value) {
// 调用iview图片上传 // 调用iview图片上传
document.querySelector('.editorUpload').click() document.querySelector("#editorUpload" + that.index).click();
} else { } else {
this.Quill.format('image', false); this.Quill.format('image', false);
} }
@ -232,20 +243,16 @@ export default {
if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) { if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
return return
} }
const param = new FormData() // 把图片上传到oss，不然会直接把base64存到数据库
param.append('file', file) Oss.upload(file).then(res => {
// 把图片上传到服务器，不然会直接把base64存到数据库
this.$post(this.api.fileupload, param, {
headers: { "Content-Type": "multipart/form-data" }
}).then(res => {
var range = ins.getSelection() var range = ins.getSelection()
if (range) { if (range) {
// 在当前光标位置插入图片 // 在当前光标位置插入图片
ins.insertEmbed(range.index, 'image', res.data.filesResult.fileUrl) ins.insertEmbed(range.index, 'image', res.url)
// 将光标移动到图片后面 // 将光标移动到图片后面
ins.setSelection(range.index + 1) ins.setSelection(range.index + 1)
} }
}).catch(res => { }) })
}); });
} }
}, false) }, false)
@ -254,11 +261,11 @@ export default {
this.loading = true this.loading = true
}, },
// quill图片上传 // quill图片上传
editorUploadSuccess (res) { editorUploadSuccess (file) {
// 获取富文本组件实例 // 获取富文本组件实例
let quill = this.Quill let quill = this.Quill
// 如果上传成功 // 如果上传成功
if (res.data.filesResult.fileUrl) { if (file.url) {
// 获取光标所在位置 // 获取光标所在位置
let lengths; let lengths;
if (quill.getSelection() == null) { if (quill.getSelection() == null) {
@ -267,7 +274,7 @@ export default {
lengths = quill.getSelection().index; lengths = quill.getSelection().index;
} }
// 插入图片，res为服务器返回的图片链接地址 // 插入图片，res为服务器返回的图片链接地址
quill.insertEmbed(lengths, 'image', res.data.filesResult.fileUrl) quill.insertEmbed(lengths, 'image', file.url)
// 调整光标到最后 // 调整光标到最后
quill.setSelection(lengths + 1) quill.setSelection(lengths + 1)
} else { } else {
@ -283,19 +290,9 @@ export default {
// markdown图片上传 // markdown图片上传
imgAdd (pos, $file) { imgAdd (pos, $file) {
let $vm = this.$refs.md let $vm = this.$refs.md
// 第一步.将图片上传到服务器. // 将图片上传到oss
const formData = new FormData(); Oss.upload($file).then(res => {
formData.append('file', $file); $vm.$img2Url(pos, res.url);
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);
}) })
}, },

11
src/utils/api.js
Unescape View File

@ -13,6 +13,9 @@ export default {
deleteProfile : `users/users/userInfo/deleteProfile`, deleteProfile : `users/users/userInfo/deleteProfile`,
refreshPageNotification : `nakadai/message/refreshPageNotification`, 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`, // 后台账号模板 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`, // 后台账号模板
checkEmailOrPhone: `occupationlab/occupationlab/architecture/checkEmailOrPhone`, // 新增学生前:校验手机号或者邮箱 checkEmailOrPhone: `occupationlab/occupationlab/architecture/checkEmailOrPhone`, // 新增学生前:校验手机号或者邮箱
@ -208,14 +211,6 @@ export default {
queryArticleByCondition: `occupationlab/occupationlab/information/article/queryArticleByCondition`, queryArticleByCondition: `occupationlab/occupationlab/information/article/queryArticleByCondition`,
articleSort: `occupationlab/occupationlab/information/article/articleSort`, 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`, //查询省份 queryProvince: `nakadai/nakadai/province/queryProvince`, //查询省份
queryCity: `nakadai/nakadai/city/queryCity`, //查询城市 queryCity: `nakadai/nakadai/city/queryCity`, //查询城市

82
src/utils/editor.js
Unescape View File

@ -1,8 +1,6 @@
import Axios from 'axios' import Oss from '@/components/upload/upload.js'
import Api from '@/utils/api'
import Setting from '@/setting'
import Util from '@/libs/util'
import { Loading } from 'element-ui' import { Loading } from 'element-ui'
export default { export default {
//skin:'oxide-dark', //skin:'oxide-dark',
language:'zh_CN', language:'zh_CN',
@ -302,57 +300,25 @@ export default {
powerpaste_allow_local_images: true, powerpaste_allow_local_images: true,
powerpaste_word_import: 'clean', powerpaste_word_import: 'clean',
powerpaste_html_import: 'clean', powerpaste_html_import: 'clean',
extraPlugins: 'uploadimage', urlconverter_callback: (url, node, onSave, name) => {
imageUploadUrl: Api.fileUploadNakadai, if (node === 'img' && url.startsWith('blob:')) {
init_instance_callback: function (editor) { // Do some custom URL conversion
editor.on('paste', (evt) => { tinymce.activeEditor && tinymce.activeEditor.uploadImages()
// 监听粘贴事件
// 实现图片粘贴上传
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,
`<img style="max-width:500px;" src="${data.filesResult.fileUrl}" >`
);
}).catch(res => {})
// 阻止默认事件，防止粘贴的图片进入富文本编辑器中
evt.preventDefault();
} else {
console.log('粘贴的不是图片，不能上传')
} }
}) // Return new URL
return url
}, },
// 自定义上传 // 自定义上传
images_upload_handler: function (blobInfo, succFun, failFun) { images_upload_handler: function (blobInfo, succFun, failFun) {
const form = new FormData() const blob = blobInfo.blob()
form.append('file', blobInfo.blob()) // blob转换为file
Axios({ const file = new File([blob], blobInfo.filename(), {
method: 'post', type: 'application/json',
url: Api.fileUploadNakadai, lastModified: Date.now()
data: form, });
headers: { Oss.upload(file).then(res => {
'Content-Type': 'multipart/form-data', succFun(res.url)
token: Util.local.get(Setting.tokenKey) })
},
}).then(({ data }) => {
succFun(data.filesResult.fileUrl)
}).catch(res => {})
}, },
//自定义文件选择器的回调内容 此方法只有在点击上方图片按钮才会触发 //自定义文件选择器的回调内容 此方法只有在点击上方图片按钮才会触发
file_picker_callback: function (callback, value, meta) { file_picker_callback: function (callback, value, meta) {
@ -373,18 +339,10 @@ export default {
let fd = new FormData(); let fd = new FormData();
fd.append("file", file); fd.append("file", file);
const load = Loading.service() const load = Loading.service()
Axios({ Oss.upload(file).then(res => {
method: 'post',
url: Api.fileUploadNakadai,
data: fd,
headers: {
'Content-Type': 'multipart/form-data',
token: Util.local.get(Setting.tokenKey)
},
}).then(({ data }) => {
load.close() load.close()
callback(data.filesResult.fileUrl) callback(res.url)
}).catch(res => { }).catch(e => {
load.close() load.close()
}) })
} }

7
src/views/information/addArticle/index.vue
Unescape View File

@ -179,12 +179,7 @@ export default {
}) })
}, },
uploadSuccess (res, file, fileList) { uploadSuccess (res, file, fileList) {
if (this.form.coverUrl) { Oss.del(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 => {
});
}
this.form.coverUrl = res.data.filesResult.fileUrl; this.form.coverUrl = res.data.filesResult.fileUrl;
}, },
uploadError (err, file, fileList) { uploadError (err, file, fileList) {

9
src/views/serve/projectAdd.vue
Unescape View File

@ -95,7 +95,8 @@
:type.sync="projectManage.experimentDescriptionType" :type.sync="projectManage.experimentDescriptionType"
radio radio
:minHeight="150" :minHeight="150"
:height="150" /> :height="150"
:index="1" />
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
@ -189,7 +190,8 @@
elseRead="true" elseRead="true"
v-model="scope.row.experimentalRequirements" v-model="scope.row.experimentalRequirements"
:minHeight="100" :minHeight="100"
:height="100" /> :height="100"
:index="2" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="score" <el-table-column prop="score"
@ -248,7 +250,8 @@
:type.sync="projectManage.experimentHintType" :type.sync="projectManage.experimentHintType"
radio radio
:minHeight="150" :minHeight="150"
:height="400" /> :height="400"
:index="3" />
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>

Write Preview
Loading…
Cancel
Save