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 @@
},
"dependencies": {
"axios": "^0.21.1",
"blueimp-md5": "^2.18.0",
"core-js": "^3.8.3",
"cross-env": "^7.0.3",
"element-ui": "^2.15.0",
......
src/api/system.js
浏览文件 @ e401f4a7
......@@ -27,9 +27,14 @@ export function getUserRolesPermissions() {
*/
export function fileUpload(formData) {
return httpRequest({
url: '/api/cms/admin/v1/common/file-upload',
url: 'https://webapp-pub.ezijing.com',
method: 'post',
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) {
const file = blobInfo.blob()
const formData = new window.FormData()
formData.append('file', file)
formData.append('type', 'image')
fileUpload(formData)
const fileName = file.name
const key = 'upload/cms-admin/' + md5(fileName + new Date().getTime()) + fileName.substr(fileName.lastIndexOf('.'))
getSignature()
.then(response => {
const [first] = response.data
response.code === 0 ? succFun(first.full_path) : failFun(response.message)
const { accessid, policy, signature, host } = response
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 => {
failFun(response.message)
.catch(err => {
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 md5 from 'blueimp-md5'
/**
* 以分隔符截取字符串，并返回最后一个截取段
*/
......@@ -31,18 +32,28 @@ export function mediaUpload(callback, value, meta) {
background: 'rgba(0, 0, 0, 0.7)',
customClass: 'tinymce-el-loading'
})
const formData = new window.FormData()
formData.append('file', file)
formData.append('type', 'file')
fileUpload(formData).then(res => {
loading.close()
if (res.code === 0 && res.data && res.data[0]) {
const [first] = res.data
callback(first.full_path, { title: first.title })
} else {
Message({ message: res.message || '上传上传出错了', type: 'error', customClass: 'tinymce-el-message' })
}
})
const fileName = file.name
const key = 'upload/cms-admin/' + md5(fileName + new Date().getTime()) + fileName.substr(fileName.lastIndexOf('.'))
getSignature()
.then(response => {
const { accessid, policy, signature, host } = response
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 => {
loading.close()
callback(fileUrl, { title: file.name })
}).catch(err => Message({ message: err.message || '上传上传出错了', type: 'error', customClass: 'tinymce-el-message' }))
})
.catch(err => {
console(err)
})
} else {
Message({ message: '只支持mp4格式的视频文件', type: 'error', customClass: 'tinymce-el-message' })
}
......
src/pages/content-manage/components/DrawerForm.vue
浏览文件 @ e401f4a7
......@@ -35,10 +35,7 @@
<el-form-item label="web端图片：" class="file-upload avatar-upload">
<el-upload
:disabled="isDetails"
class="avatar-uploader"
action="#"
:show-file-list="false"
:before-upload="val => beforeUpload(val, 'web_img')">
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">
<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>
</el-upload>
......@@ -51,18 +48,13 @@
<i class="el-icon-download" @click="handleDownloadFile('web_img_uri')"></i>
</div>
<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>
<p class="des">请上传文件，最多上传一张/份<br>支持：PNG、JPG</p>
</el-form-item>
<el-form-item label="移动端图片：" class="file-upload avatar-upload">
<el-upload
:disabled="isDetails"
action="#"
class="avatar-uploader"
:show-file-list="false"
:before-upload="val => beforeUpload(val, 'mobile_terminal_img')">
<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">
<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>
</el-upload>
......@@ -75,25 +67,19 @@
<i class="el-icon-download" @click="handleDownloadFile('mobile_terminal_img_uri')"></i>
</div>
<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>
<p class="des">请上传文件，最多上传一张/份<br>支持：PNG、JPG</p>
</el-form-item>
<el-form-item label="上传附件：" class="file-upload">
<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, 'enclosure')">
<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">
<el-button slot="trigger" size="small" type="primary" :disabled="isDetails">上传文件</el-button>
</el-upload>
<p class="des">
<i class="el-icon-loading" v-if="enclosure_loading"></i>
<i class="el-icon-circle-check" v-if="!enclosure_loading && form.enclosure_uri"></i>
<i class="el-icon-loading" v-if="fileLoading === 'enclosure'"></i>
<i class="el-icon-circle-check" v-if="!fileLoading && form.enclosure_uri"></i>
请上传文件，最多上传一份<br>支持：word、excel、pdf
</p>
</div>
......@@ -101,18 +87,18 @@
{{form.enclosure_title}}
<span class="upload-file-bar">
<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>
</div>
</el-form-item>
<el-form-item label="上传视频：" class="file-upload">
<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-upload>
<p class="des">
<i class="el-icon-loading" v-if="video_loading"></i>
<i class="el-icon-circle-check" v-if="!video_loading && form.video_uri"></i>
<i class="el-icon-loading" v-if="fileLoading === 'video'"></i>
<i class="el-icon-circle-check" v-if="!fileLoading && form.video_uri"></i>
请上传文件，最多上传一份<br>支持：MP4
</p>
</div>
......@@ -120,7 +106,7 @@
{{form.video_title}}
<span class="upload-file-bar">
<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>
</div>
</el-form-item>
......@@ -182,7 +168,8 @@
<script>
import Tinymce from '@/components/Tinymce'
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 { formatToDate } from '@/utils/utils'
const splitStrLast = function(str, split) {
......@@ -239,10 +226,8 @@ export default {
return {
typeList: [],
form: Object.assign({}, defaultForm),
web_img_loading: '',
mobile_terminal_img_loading: '',
enclosure_loading: '',
video_loading: '',
fileLoading: '',
uploadData: {},
rules: {
project_id: [
{ required: true, message: '请选择项目', trigger: 'change' }
......@@ -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) {
let errorMsg = ''
const suffix = splitStrLast(file.name, '.')
if (target === 'web_img' || target === 'mobile_terminal_img') {
if (['image/png', 'image/jpeg'].includes(file.type)) {
this.fetchUpload(file, 'image', target)
} else {
if (!['image/png', 'image/jpeg'].includes(file.type)) {
errorMsg = '上传图片格式错误，只允许png/jpg格式'
}
} else if (target === 'enclosure') {
const typeList = ['doc', 'docx', 'pdf', 'xls', 'xlsx']
if (typeList.includes(suffix)) {
this.fetchUpload(file, 'file', target)
} else {
if (!typeList.includes(suffix)) {
errorMsg = '上传附件格式错误，只允许word/excel/pdf格式'
}
} else {
if (suffix === 'mp4') {
this.fetchUpload(file, 'file', target)
} else {
if (suffix !== 'mp4') {
errorMsg = '上传附件格式错误，只允许mp4格式'
}
}
if (errorMsg) this.$message.error(errorMsg)
return false
if (errorMsg) {
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() {
this.$emit('drawFormClose')
......@@ -385,10 +390,11 @@ export default {
}
},
handleClearFile(target) {
this.form[target] = ''
if (['enclosure_uri', 'video_uri'].includes(target)) {
this.form[target + '_name'] = ''
}
console.log(target)
this.form[target + '_uri'] = ''
this.form[target + '_title'] = ''
this.form[target + '_size'] = ''
console.log(this.form)
},
tinymceBlur() {
this.$refs['el-form-item-tinymce'].$emit('el.form.blur')
......@@ -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(
}
let params = config.params || config.data
if (config.headers['Content-Type'] === 'multipart/form-data') {
Object.keys(defaultParams).forEach(key => {
params.append(key, defaultParams[key])
})
// Object.keys(defaultParams).forEach(key => {
// params.append(key, defaultParams[key])
// })
} else {
params = Object.assign({}, defaultParams, params)
if (['post', 'put', 'delete'].includes(config.method)) {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论