|
|
@@ -4,38 +4,13 @@
|
|
|
<el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
|
|
|
<el-card class="box-card">
|
|
|
<div slot="header" class="clearfix">
|
|
|
- <span>上传视频文件</span>
|
|
|
- </div>
|
|
|
- <div class="text item">
|
|
|
- <uploader
|
|
|
- class="uploader-example"
|
|
|
- :options="options"
|
|
|
- :auto-start="true"
|
|
|
- @file-added="onFileAdded"
|
|
|
- @file-success="onFileSuccess"
|
|
|
- @file-progress="onFileProgress"
|
|
|
- @file-error="onFileError"
|
|
|
- >
|
|
|
- <uploader-unsupport />
|
|
|
- <uploader-drop>
|
|
|
- <p>拖动视频文件到此处或</p>
|
|
|
- <uploader-btn :attrs="attrs">选择视频文件</uploader-btn>
|
|
|
- </uploader-drop>
|
|
|
- <uploader-list />
|
|
|
- </uploader>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-row>
|
|
|
- <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
|
|
|
- <el-card class="box-card">
|
|
|
- <div slot="header" class="clearfix">
|
|
|
- <span>上传用户头像</span>
|
|
|
+ <span>上传 IM 图片</span>
|
|
|
</div>
|
|
|
<div class="text item">
|
|
|
<el-tooltip class="item" effect="dark" content="点击上传图片" placement="top-end">
|
|
|
<el-upload
|
|
|
class="avatar-uploader"
|
|
|
- :action="actionUrl"
|
|
|
+ :action="imgOssUrl"
|
|
|
:headers="imgHeaders"
|
|
|
:data="imgData"
|
|
|
:with-credentials="true"
|
|
|
@@ -56,14 +31,14 @@
|
|
|
<el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
|
|
|
<el-card class="box-card">
|
|
|
<div slot="header" class="clearfix">
|
|
|
- <span>文件地址</span>
|
|
|
+ <span>OSS 地址</span>
|
|
|
</div>
|
|
|
<div class="text item">
|
|
|
<el-form ref="form" :model="form" label-width="80px">
|
|
|
- <el-form-item label="文件地址">
|
|
|
+ <el-form-item label="视频地址">
|
|
|
<el-input v-model="form.fileUrl" style="padding-right: 1px" readonly />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="头像地址">
|
|
|
+ <el-form-item label="图片地址">
|
|
|
<el-input v-model="form.imageUrl" style="padding-right: 1px" readonly />
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
@@ -81,33 +56,12 @@ export default {
|
|
|
name: 'PublishFile',
|
|
|
data() {
|
|
|
return {
|
|
|
- actionUrl: process.env.VUE_APP_OSS_URL,
|
|
|
- // ****************************************************************************************************************
|
|
|
- options: {
|
|
|
- target: process.env.VUE_APP_OSS_URL,
|
|
|
- chunkSize: 1024 * 1024 * 1024 * 10, // 10GiB
|
|
|
- fileParameterName: 'file',
|
|
|
- testChunks: false,
|
|
|
- query: (file, chunk) => {
|
|
|
- return {
|
|
|
- channelId: 2
|
|
|
- }
|
|
|
- },
|
|
|
- headers: {
|
|
|
- Authorization: ''
|
|
|
- },
|
|
|
- withCredentials: true
|
|
|
- },
|
|
|
- attrs: {
|
|
|
- accept: 'video/*'
|
|
|
- },
|
|
|
- // ****************************************************************************************************************
|
|
|
imgOssUrl: null,
|
|
|
imgHeaders: {
|
|
|
Authorization: ''
|
|
|
},
|
|
|
imgData: {
|
|
|
- channelId: 4
|
|
|
+ channelId: process.env.VUE_APP_UPLOAD_IMIMG_CHANNEL
|
|
|
},
|
|
|
coverUrl: null,
|
|
|
// ****************************************************************************************************************
|
|
|
@@ -118,30 +72,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- getServerInfo(2).then(res => {
|
|
|
- if (res.code === 0) {
|
|
|
- const resData = res.data
|
|
|
- this.options.target = resData.ossUrl
|
|
|
- this.options.chunkSize = resData.maxSize
|
|
|
- this.options.headers.Authorization = 'Bearer ' + resData.token
|
|
|
- } else {
|
|
|
- this.$notify({
|
|
|
- title: '提示',
|
|
|
- message: '获取 OSS 服务器地址失败, 暂时无法上传文件',
|
|
|
- type: 'error',
|
|
|
- duration: 3000
|
|
|
- })
|
|
|
- }
|
|
|
- }).catch(error => {
|
|
|
- this.$notify({
|
|
|
- title: '提示',
|
|
|
- message: error.message,
|
|
|
- type: 'warning',
|
|
|
- duration: 3000
|
|
|
- })
|
|
|
- })
|
|
|
-
|
|
|
- getServerInfo(4).then(res => {
|
|
|
+ getServerInfo(this.imgData.channelId).then(res => {
|
|
|
if (res.code === 0) {
|
|
|
const resData = res.data
|
|
|
this.imgOssUrl = resData.ossUrl
|
|
|
@@ -166,49 +97,6 @@ export default {
|
|
|
mounted() {
|
|
|
},
|
|
|
methods: {
|
|
|
- // ****************************************************************************************************************
|
|
|
- onFileAdded(file) {
|
|
|
- if (file.file.size > 1024 * 1024 * 1024 * 5) {
|
|
|
- file.cancel()
|
|
|
- this.$notify({
|
|
|
- title: '提示',
|
|
|
- message: '视频文件应小于 5GiB',
|
|
|
- type: 'warning',
|
|
|
- duration: 3000
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- },
|
|
|
- onFileProgress(rootFile, file, chunk) {
|
|
|
- },
|
|
|
- onFileSuccess(rootFile, file, response, chunk) {
|
|
|
- const res = JSON.parse(response)
|
|
|
- if (res.code === 0) {
|
|
|
- const resData = res.data
|
|
|
- this.form.fileUrl = resData.uploadId
|
|
|
- this.$notify({
|
|
|
- title: '提示',
|
|
|
- message: '视频已上传',
|
|
|
- type: 'warning',
|
|
|
- duration: 3000
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.$notify({
|
|
|
- title: '提示',
|
|
|
- message: '视频文件上传失败',
|
|
|
- type: 'warning',
|
|
|
- duration: 3000
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- onFileError(rootFile, file, response, chunk) {
|
|
|
- this.$notify({
|
|
|
- title: '提示',
|
|
|
- message: '文件上传错误',
|
|
|
- type: 'warning',
|
|
|
- duration: 3000
|
|
|
- })
|
|
|
- },
|
|
|
// ****************************************************************************************************************
|
|
|
beforeAvatarUpload(file) {
|
|
|
const isJPG = file.type === 'image/jpeg'
|
