huangge1199/vue-pro
1
0
Fork 0
mirror of https://gitee.com/huangge1199_admin/vue-pro.git synced 2024-11-23 07:41:53 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: 上传视频无法预览

Browse Source
This commit is contained in:
gaibu 2023-01-04 16:33:05 +08:00
parent 427d031ba5
commit 29d2aad176
1 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
yudao-ui-admin/src/views/infra/file/index.vue
View File

@ -1,14 +1,16 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<doc-alert title="上传下载" url="https://doc.iocoder.cn/file/" /> <doc-alert title="上传下载" url="https://doc.iocoder.cn/file/"/>
<!-- 搜索工作栏 --> <!-- 搜索工作栏 -->
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="文件路径" prop="path"> <el-form-item label="文件路径" prop="path">
<el-input v-model="queryParams.path" placeholder="请输入文件路径" clearable @keyup.enter.native="handleQuery"/> <el-input v-model="queryParams.path" placeholder="请输入文件路径" clearable @keyup.enter.native="handleQuery"/>
</el-form-item> </el-form-item>
<el-form-item label="创建时间" prop="createTime"> <el-form-item label="创建时间" prop="createTime">
<el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange" <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" /> type="daterange"
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']"/>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
@ -35,6 +37,9 @@
<template v-slot="scope"> <template v-slot="scope">
<image-preview v-if="scope.row.type&&scope.row.type.indexOf('image/') === 0" :src="scope.row.url" <image-preview v-if="scope.row.type&&scope.row.type.indexOf('image/') === 0" :src="scope.row.url"
:width="'100px'"></image-preview> :width="'100px'"></image-preview>
<video v-else-if="scope.row.type&&scope.row.type.indexOf('video/') === 0" :width="'100px'">
<source :src="scope.row.url"/>
</video>
<i v-else>无法预览，点击 <i v-else>无法预览，点击
<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" target="_blank" <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" target="_blank"
:href="getFileUrl + scope.row.configId + '/get/' + scope.row.path">下载 :href="getFileUrl + scope.row.configId + '/get/' + scope.row.path">下载
@ -118,7 +123,7 @@ export default {
title: "", // 弹出层标题 title: "", // 弹出层标题
isUploading: false, // 是否禁用上传 isUploading: false, // 是否禁用上传
url: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 请求地址 url: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 请求地址
headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部 headers: {Authorization: "Bearer " + getAccessToken()}, // 设置上传的请求头部
data: {} // 上传的额外数据，用于文件名 data: {} // 上传的额外数据，用于文件名
}, },
}; };
@ -189,19 +194,20 @@ export default {
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { handleDelete(row) {
const id = row.id; const id = row.id;
this.$modal.confirm('是否确认删除文件编号为"' + id + '"的数据项?').then(function() { this.$modal.confirm('是否确认删除文件编号为"' + id + '"的数据项?').then(function () {
return deleteFile(id); return deleteFile(id);
}).then(() => { }).then(() => {
this.getList(); this.getList();
this.$modal.msgSuccess("删除成功"); this.$modal.msgSuccess("删除成功");
}).catch(() => {}); }).catch(() => {
});
}, },
// 用户昵称展示 // 用户昵称展示
sizeFormat(row, column) { sizeFormat(row, column) {
const unitArr = ["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"]; const unitArr = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
const srcSize = parseFloat(row.size); const srcSize = parseFloat(row.size);
const index = Math.floor(Math.log(srcSize) / Math.log(1024)); const index = Math.floor(Math.log(srcSize) / Math.log(1024));
let size =srcSize/Math.pow(1024,index); let size = srcSize / Math.pow(1024, index);
size = size.toFixed(2);//保留的小数位数 size = size.toFixed(2);//保留的小数位数
return size + ' ' + unitArr[index]; return size + ' ' + unitArr[index];
}, },