Skip to content

C
cms-admin
提交 e401f4a7 authored 作者: pengxiaohui's avatar pengxiaohui
浏览文件
操作

优化文件图片上传至oss

上级 7662f11c
隐藏空白字符变更
内嵌 并排
正在显示 包含 109 行增加 和 87 行删除
package-lock.json
浏览文件 @ e401f4a7
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
浏览文件 @ e401f4a7
...@@ -70,6 +70,7 @@ ...@@ -70,6 +70,7 @@
}, },
"dependencies": { "dependencies": {
"axios": "^0.21.1", "axios": "^0.21.1",
"blueimp-md5": "^2.18.0",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"element-ui": "^2.15.0", "element-ui": "^2.15.0",
......
src/api/system.js
浏览文件 @ e401f4a7
...@@ -27,9 +27,14 @@ export function getUserRolesPermissions() { ...@@ -27,9 +27,14 @@ export function getUserRolesPermissions() {
*/ */
export function fileUpload(formData) { export function fileUpload(formData) {
return httpRequest({ return httpRequest({
url: '/api/cms/admin/v1/common/file-upload', url: 'https://webapp-pub.ezijing.com',
method: 'post', method: 'post',
headers: { 'Content-Type': 'multipart/form-data' }, headers: { 'Content-Type': 'multipart/form-data' },
data: formData data: formData,
withCredentials: false
}) })
} }
// 获取oss signature
export function getSignature() {
return httpRequest.get('/api/usercenter/aliyun/get-signature')
}
src/components/Tinymce/plugins/image.js
浏览文件 @ e401f4a7
import { fileUpload } from '@/api/system' import { fileUpload, getSignature } from '@/api/system'
import md5 from 'blueimp-md5'
export default function(blobInfo, succFun, failFun) { export default function(blobInfo, succFun, failFun) {
const file = blobInfo.blob() const file = blobInfo.blob()
const formData = new window.FormData() const fileName = file.name
formData.append('file', file) const key = 'upload/cms-admin/' + md5(fileName + new Date().getTime()) + fileName.substr(fileName.lastIndexOf('.'))
formData.append('type', 'image') getSignature()
fileUpload(formData)
.then(response => { .then(response => {
const [first] = response.data const { accessid, policy, signature, host } = response
response.code === 0 ? succFun(first.full_path) : failFun(response.message) const data = { key, OSSAccessKeyId: accessid, policy, signature, success_action_status: '200' }
const fileUrl = `${host}/${key}`
const formData = new window.FormData()
formData.append('key', data.key)
formData.append('OSSAccessKeyId', data.OSSAccessKeyId)
formData.append('policy', data.policy)
formData.append('signature', data.signature)
formData.append('success_action_status', '200')
formData.append('file', file)
fileUpload(formData).then(res => {
succFun(fileUrl)
}).catch((err) =>
failFun(err.message || '上传出错了')
)
}) })
.catch(response => { .catch(err => {
failFun(response.message) console(err)
}) })
} }
src/components/Tinymce/plugins/media.js
浏览文件 @ e401f4a7
import { fileUpload } from '@/api/system' import { fileUpload, getSignature } from '@/api/system'
import { Message, Loading } from 'element-ui' import { Message, Loading } from 'element-ui'
import md5 from 'blueimp-md5'
/** /**
* 以分隔符截取字符串，并返回最后一个截取段 * 以分隔符截取字符串，并返回最后一个截取段
*/ */
...@@ -31,18 +32,28 @@ export function mediaUpload(callback, value, meta) { ...@@ -31,18 +32,28 @@ export function mediaUpload(callback, value, meta) {
background: 'rgba(0, 0, 0, 0.7)', background: 'rgba(0, 0, 0, 0.7)',
customClass: 'tinymce-el-loading' customClass: 'tinymce-el-loading'
}) })
const formData = new window.FormData() const fileName = file.name
formData.append('file', file) const key = 'upload/cms-admin/' + md5(fileName + new Date().getTime()) + fileName.substr(fileName.lastIndexOf('.'))
formData.append('type', 'file') getSignature()
fileUpload(formData).then(res => { .then(response => {
loading.close() const { accessid, policy, signature, host } = response
if (res.code === 0 && res.data && res.data[0]) { const data = { key, OSSAccessKeyId: accessid, policy, signature, success_action_status: '200' }
const [first] = res.data const fileUrl = `${host}/${key}`
callback(first.full_path, { title: first.title }) const formData = new window.FormData()
} else { formData.append('key', data.key)
Message({ message: res.message || '上传上传出错了', type: 'error', customClass: 'tinymce-el-message' }) formData.append('OSSAccessKeyId', data.OSSAccessKeyId)
} formData.append('policy', data.policy)
}) formData.append('signature', data.signature)
formData.append('success_action_status', '200')
formData.append('file', file)
fileUpload(formData).then(res => {
loading.close()
callback(fileUrl, { title: file.name })
}).catch(err => Message({ message: err.message || '上传上传出错了', type: 'error', customClass: 'tinymce-el-message' }))
})
.catch(err => {
console(err)
})
} else { } else {
Message({ message: '只支持mp4格式的视频文件', type: 'error', customClass: 'tinymce-el-message' }) Message({ message: '只支持mp4格式的视频文件', type: 'error', customClass: 'tinymce-el-message' })
} }
......
src/pages/content-manage/components/DrawerForm.vue
浏览文件 @ e401f4a7
...@@ -35,10 +35,7 @@ ...@@ -35,10 +35,7 @@
<el-form-item label="web端图片：" class="file-upload avatar-upload"> <el-form-item label="web端图片：" class="file-upload avatar-upload">
<el-upload <el-upload
:disabled="isDetails" :disabled="isDetails"
class="avatar-uploader" class="avatar-uploader" action="https://webapp-pub.ezijing.com" :show-file-list="false" :before-upload="val => beforeUpload(val, 'web_img')" :on-success="(res, file) => handleSuccess(res, file, 'web_img')" :data="uploadData">
action="#"
:show-file-list="false"
:before-upload="val => beforeUpload(val, 'web_img')">
<img v-if="form.web_img_uri" :src="form.web_img_uri" class="avatar"> <img v-if="form.web_img_uri" :src="form.web_img_uri" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i> <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload> </el-upload>
...@@ -51,18 +48,13 @@ ...@@ -51,18 +48,13 @@
<i class="el-icon-download" @click="handleDownloadFile('web_img_uri')"></i> <i class="el-icon-download" @click="handleDownloadFile('web_img_uri')"></i>
</div> </div>
<div v-if="!isDetails"> <div v-if="!isDetails">
<i class="el-icon-circle-close" @click="handleClearFile('web_img_uri')"></i> <i class="el-icon-circle-close" @click="handleClearFile('web_img')"></i>
</div> </div>
</div> </div>
<p class="des">请上传文件，最多上传一张/份<br>支持：PNG、JPG</p> <p class="des">请上传文件，最多上传一张/份<br>支持：PNG、JPG</p>
</el-form-item> </el-form-item>
<el-form-item label="移动端图片：" class="file-upload avatar-upload"> <el-form-item label="移动端图片：" class="file-upload avatar-upload">
<el-upload <el-upload :disabled="isDetails" class="avatar-uploader" action="https://webapp-pub.ezijing.com" :show-file-list="false" :before-upload="val => beforeUpload(val, 'mobile_terminal_img')" :on-success="(res, file) => handleSuccess(res, file, 'mobile_terminal_img')" :data="uploadData">
:disabled="isDetails"
action="#"
class="avatar-uploader"
:show-file-list="false"
:before-upload="val => beforeUpload(val, 'mobile_terminal_img')">
<img v-if="form.mobile_terminal_img_uri" :src="form.mobile_terminal_img_uri" class="avatar"> <img v-if="form.mobile_terminal_img_uri" :src="form.mobile_terminal_img_uri" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i> <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload> </el-upload>
...@@ -75,25 +67,19 @@ ...@@ -75,25 +67,19 @@
<i class="el-icon-download" @click="handleDownloadFile('mobile_terminal_img_uri')"></i> <i class="el-icon-download" @click="handleDownloadFile('mobile_terminal_img_uri')"></i>
</div> </div>
<div v-if="!isDetails"> <div v-if="!isDetails">
<i class="el-icon-circle-close" @click="handleClearFile('mobile_terminal_img_uri')"></i> <i class="el-icon-circle-close" @click="handleClearFile('mobile_terminal_img')"></i>
</div> </div>
</div> </div>
<p class="des">请上传文件，最多上传一张/份<br>支持：PNG、JPG</p> <p class="des">请上传文件，最多上传一张/份<br>支持：PNG、JPG</p>
</el-form-item> </el-form-item>
<el-form-item label="上传附件：" class="file-upload"> <el-form-item label="上传附件：" class="file-upload">
<div style="padding-top:6px;height:36px;"> <div style="padding-top:6px;height:36px;">
<el-upload <el-upload :disabled="isDetails" class="file-uploader" ref="upload" action="https://webapp-pub.ezijing.com" :show-file-list="false" :before-upload="val => beforeUpload(val, 'enclosure')" :on-success="(res, file) => handleSuccess(res, file, 'enclosure')" :data="uploadData">
:disabled="isDetails"
action="#"
class="file-uploader"
ref="upload"
:show-file-list="false"
:before-upload="val => beforeUpload(val, 'enclosure')">
<el-button slot="trigger" size="small" type="primary" :disabled="isDetails">上传文件</el-button> <el-button slot="trigger" size="small" type="primary" :disabled="isDetails">上传文件</el-button>
</el-upload> </el-upload>
<p class="des"> <p class="des">
<i class="el-icon-loading" v-if="enclosure_loading"></i> <i class="el-icon-loading" v-if="fileLoading === 'enclosure'"></i>
<i class="el-icon-circle-check" v-if="!enclosure_loading && form.enclosure_uri"></i> <i class="el-icon-circle-check" v-if="!fileLoading && form.enclosure_uri"></i>
请上传文件，最多上传一份<br>支持：word、excel、pdf 请上传文件，最多上传一份<br>支持：word、excel、pdf
</p> </p>
</div> </div>
...@@ -101,18 +87,18 @@ ...@@ -101,18 +87,18 @@
{{form.enclosure_title}} {{form.enclosure_title}}
<span class="upload-file-bar"> <span class="upload-file-bar">
<i :class="isFilePreview(form.enclosure_title) ? 'el-icon-view':'el-icon-download'" @click="handleDownloadFile('enclosure_uri')"></i> <i :class="isFilePreview(form.enclosure_title) ? 'el-icon-view':'el-icon-download'" @click="handleDownloadFile('enclosure_uri')"></i>
<i v-if="!isDetails" class="el-icon-circle-close" @click="handleClearFile('enclosure_uri')"></i> <i v-if="!isDetails" class="el-icon-circle-close" @click="handleClearFile('enclosure')"></i>
</span> </span>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="上传视频：" class="file-upload"> <el-form-item label="上传视频：" class="file-upload">
<div style="padding-top:6px;height:36px;"> <div style="padding-top:6px;height:36px;">
<el-upload :disabled="isDetails" action="#" class="file-uploader" ref="upload" :show-file-list="false" :before-upload="val => beforeUpload(val, 'video')"> <el-upload :disabled="isDetails" class="file-uploader" ref="upload" action="https://webapp-pub.ezijing.com" :show-file-list="false" :before-upload="val => beforeUpload(val, 'video')" :on-success="(res, file) => handleSuccess(res, file, 'video')" :data="uploadData">
<el-button slot="trigger" size="small" type="primary" :disabled="isDetails">上传视频</el-button> <el-button slot="trigger" size="small" type="primary" :disabled="isDetails">上传视频</el-button>
</el-upload> </el-upload>
<p class="des"> <p class="des">
<i class="el-icon-loading" v-if="video_loading"></i> <i class="el-icon-loading" v-if="fileLoading === 'video'"></i>
<i class="el-icon-circle-check" v-if="!video_loading && form.video_uri"></i> <i class="el-icon-circle-check" v-if="!fileLoading && form.video_uri"></i>
请上传文件，最多上传一份<br>支持：MP4 请上传文件，最多上传一份<br>支持：MP4
</p> </p>
</div> </div>
...@@ -120,7 +106,7 @@ ...@@ -120,7 +106,7 @@
{{form.video_title}} {{form.video_title}}
<span class="upload-file-bar"> <span class="upload-file-bar">
<i class="el-icon-view" @click="handleDownloadFile('video_uri')"></i> <i class="el-icon-view" @click="handleDownloadFile('video_uri')"></i>
<i v-if="!isDetails" class="el-icon-circle-close" @click="handleClearFile('video_uri')"></i> <i v-if="!isDetails" class="el-icon-circle-close" @click="handleClearFile('video')"></i>
</span> </span>
</div> </div>
</el-form-item> </el-form-item>
...@@ -182,7 +168,8 @@ ...@@ -182,7 +168,8 @@
<script> <script>
import Tinymce from '@/components/Tinymce' import Tinymce from '@/components/Tinymce'
import { getProjectContentTypeList } from '@/api/contentManage' import { getProjectContentTypeList } from '@/api/contentManage'
import { fileUpload } from '@/api/system' import { getSignature } from '@/api/system'
import md5 from 'blueimp-md5'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { formatToDate } from '@/utils/utils' import { formatToDate } from '@/utils/utils'
const splitStrLast = function(str, split) { const splitStrLast = function(str, split) {
...@@ -239,10 +226,8 @@ export default { ...@@ -239,10 +226,8 @@ export default {
return { return {
typeList: [], typeList: [],
form: Object.assign({}, defaultForm), form: Object.assign({}, defaultForm),
web_img_loading: '', fileLoading: '',
mobile_terminal_img_loading: '', uploadData: {},
enclosure_loading: '',
video_loading: '',
rules: { rules: {
project_id: [ project_id: [
{ required: true, message: '请选择项目', trigger: 'change' } { required: true, message: '请选择项目', trigger: 'change' }
...@@ -346,31 +331,51 @@ export default { ...@@ -346,31 +331,51 @@ export default {
} }
} }
}, },
handleSuccess(res, file, target) {
this.fileLoading = ''
const _file = file.raw
this.form[target + '_uri'] = _file.src
this.form[target + '_title'] = _file.name
this.form[target + '_size'] = _file.size + ''
},
beforeUpload(file, target) { beforeUpload(file, target) {
let errorMsg = '' let errorMsg = ''
const suffix = splitStrLast(file.name, '.') const suffix = splitStrLast(file.name, '.')
if (target === 'web_img' || target === 'mobile_terminal_img') { if (target === 'web_img' || target === 'mobile_terminal_img') {
if (['image/png', 'image/jpeg'].includes(file.type)) { if (!['image/png', 'image/jpeg'].includes(file.type)) {
this.fetchUpload(file, 'image', target)
} else {
errorMsg = '上传图片格式错误，只允许png/jpg格式' errorMsg = '上传图片格式错误，只允许png/jpg格式'
} }
} else if (target === 'enclosure') { } else if (target === 'enclosure') {
const typeList = ['doc', 'docx', 'pdf', 'xls', 'xlsx'] const typeList = ['doc', 'docx', 'pdf', 'xls', 'xlsx']
if (typeList.includes(suffix)) { if (!typeList.includes(suffix)) {
this.fetchUpload(file, 'file', target)
} else {
errorMsg = '上传附件格式错误，只允许word/excel/pdf格式' errorMsg = '上传附件格式错误，只允许word/excel/pdf格式'
} }
} else { } else {
if (suffix === 'mp4') { if (suffix !== 'mp4') {
this.fetchUpload(file, 'file', target)
} else {
errorMsg = '上传附件格式错误，只允许mp4格式' errorMsg = '上传附件格式错误，只允许mp4格式'
} }
} }
if (errorMsg) this.$message.error(errorMsg) if (errorMsg) {
return false this.$message.error(errorMsg)
return false
} else {
this.fileLoading = target
const fileName = file.name
const key = 'upload/cms-admin/' + md5(fileName + new Date().getTime()) + fileName.substr(fileName.lastIndexOf('.'))
return new Promise((resolve, reject) => {
getSignature()
.then(response => {
const { accessid, policy, signature, host } = response
this.uploadData = { key, OSSAccessKeyId: accessid, policy, signature, success_action_status: '200' }
file.src = `${host}/${key}`
resolve(true)
})
.catch(err => {
console.log(err)
reject(err)
})
})
}
}, },
handleClose() { handleClose() {
this.$emit('drawFormClose') this.$emit('drawFormClose')
...@@ -385,10 +390,11 @@ export default { ...@@ -385,10 +390,11 @@ export default {
} }
}, },
handleClearFile(target) { handleClearFile(target) {
this.form[target] = '' console.log(target)
if (['enclosure_uri', 'video_uri'].includes(target)) { this.form[target + '_uri'] = ''
this.form[target + '_name'] = '' this.form[target + '_title'] = ''
} this.form[target + '_size'] = ''
console.log(this.form)
}, },
tinymceBlur() { tinymceBlur() {
this.$refs['el-form-item-tinymce'].$emit('el.form.blur') this.$refs['el-form-item-tinymce'].$emit('el.form.blur')
...@@ -443,20 +449,6 @@ export default { ...@@ -443,20 +449,6 @@ export default {
} }
}) })
} }
},
fetchUpload(file, type, target) {
const formData = new window.FormData()
formData.append('file', file)
formData.append('type', type)
this[target + '_loading'] = '1'
fileUpload(formData).then(res => {
this[target + '_loading'] = ''
if (res.code === 0 && res.message === 'SUCCESS') {
this.form[target + '_uri'] = res.data[0].full_path
this.form[target + '_title'] = res.data[0].title
this.form[target + '_size'] = res.data[0].size + ''
}
})
} }
} }
} }
......
src/utils/axios.js
浏览文件 @ e401f4a7
...@@ -19,9 +19,9 @@ httpRequest.interceptors.request.use( ...@@ -19,9 +19,9 @@ httpRequest.interceptors.request.use(
} }
let params = config.params || config.data let params = config.params || config.data
if (config.headers['Content-Type'] === 'multipart/form-data') { if (config.headers['Content-Type'] === 'multipart/form-data') {
Object.keys(defaultParams).forEach(key => { // Object.keys(defaultParams).forEach(key => {
params.append(key, defaultParams[key]) // params.append(key, defaultParams[key])
}) // })
} else { } else {
params = Object.assign({}, defaultParams, params) params = Object.assign({}, defaultParams, params)
if (['post', 'put', 'delete'].includes(config.method)) { if (['post', 'put', 'delete'].includes(config.method)) {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论