fix: use OSS direct upload for video and audio in resource admin
This commit is contained in:
@@ -102,8 +102,8 @@ export default defineComponent({
|
|||||||
const visible = ref(false)
|
const visible = ref(false)
|
||||||
const fileList = ref<any[]>([])
|
const fileList = ref<any[]>([])
|
||||||
|
|
||||||
// 仅 video + direct 时才接管 http-request
|
// 仅 video/voice + direct 时才接管 http-request
|
||||||
const useDirect = computed(() => props.direct && props.type === 'video')
|
const useDirect = computed(() => props.direct && ['video', 'voice'].includes(props.type))
|
||||||
|
|
||||||
const handleProgress = () => {
|
const handleProgress = () => {
|
||||||
visible.value = true
|
visible.value = true
|
||||||
@@ -151,6 +151,8 @@ export default defineComponent({
|
|||||||
return '.jpg,.png,.gif,.jpeg,.ico'
|
return '.jpg,.png,.gif,.jpeg,.ico'
|
||||||
case 'video':
|
case 'video':
|
||||||
return '.wmv,.avi,.mpg,.mpeg,.3gp,.mov,.mp4,.flv,.rmvb,.mkv'
|
return '.wmv,.avi,.mpg,.mpeg,.3gp,.mov,.mp4,.flv,.rmvb,.mkv'
|
||||||
|
case 'voice':
|
||||||
|
return '.mp3,.wav,.wma,.m4a,.aac,.amr'
|
||||||
default:
|
default:
|
||||||
return '*'
|
return '*'
|
||||||
}
|
}
|
||||||
@@ -162,7 +164,7 @@ export default defineComponent({
|
|||||||
try {
|
try {
|
||||||
const data = await uploadVideoDirectToCos({
|
const data = await uploadVideoDirectToCos({
|
||||||
file: options.file,
|
file: options.file,
|
||||||
type: 'video',
|
type: props.type as any,
|
||||||
cid: Number((options.data as any)?.cid ?? 0),
|
cid: Number((options.data as any)?.cid ?? 0),
|
||||||
onProgress(info) {
|
onProgress(info) {
|
||||||
// 触发 ElUpload 内部进度(保持与默认上传一致的体验)
|
// 触发 ElUpload 内部进度(保持与默认上传一致的体验)
|
||||||
|
|||||||
@@ -59,7 +59,16 @@
|
|||||||
<el-input v-model="formData.title" placeholder="请输入资源标题" />
|
<el-input v-model="formData.title" placeholder="请输入资源标题" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="资源文件" prop="file_url">
|
<el-form-item label="资源文件" prop="file_url">
|
||||||
<material-picker v-model="formData.file_url" :limit="1" :type="formData.type == 1 ? 'image' : (formData.type == 2 ? 'video' : 'file')" />
|
<material-picker v-if="formData.type === 1" v-model="formData.file_url" :limit="1" type="image" />
|
||||||
|
<upload v-else-if="formData.type === 2" type="video" direct :multiple="false" :limit="1" :show-progress="true" @success="handleUploadSuccess">
|
||||||
|
<el-button type="primary">上传视频 (OSS直传)</el-button>
|
||||||
|
</upload>
|
||||||
|
<upload v-else-if="formData.type === 3" type="voice" direct :multiple="false" :limit="1" :show-progress="true" @success="handleUploadSuccess">
|
||||||
|
<el-button type="primary">上传语音 (OSS直传)</el-button>
|
||||||
|
</upload>
|
||||||
|
<div v-if="formData.file_url && formData.type !== 1" class="ml-4 text-primary truncate max-w-xs" :title="formData.file_url">
|
||||||
|
已上传: {{ formData.file_url }}
|
||||||
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="关联账号" prop="user_ids">
|
<el-form-item label="关联账号" prop="user_ids">
|
||||||
<el-select v-model="formData.user_ids" multiple filterable placeholder="请选择要分发的账号">
|
<el-select v-model="formData.user_ids" multiple filterable placeholder="请选择要分发的账号">
|
||||||
@@ -80,6 +89,7 @@ import { ref, reactive, onMounted } from 'vue'
|
|||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
import { apiAssetResourceList, apiAssetResourceAdd, apiAssetResourceDelete, apiAssetUserList } from '@/api/asset'
|
import { apiAssetResourceList, apiAssetResourceAdd, apiAssetResourceDelete, apiAssetUserList } from '@/api/asset'
|
||||||
import MaterialPicker from '@/components/material/picker.vue'
|
import MaterialPicker from '@/components/material/picker.vue'
|
||||||
|
import Upload from '@/components/upload/index.vue'
|
||||||
|
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const tableData = ref([])
|
const tableData = ref([])
|
||||||
@@ -143,6 +153,11 @@ const handleAdd = () => {
|
|||||||
dialogVisible.value = true
|
dialogVisible.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleUploadSuccess = (response: any) => {
|
||||||
|
formData.file_url = response?.data?.uri || response?.data?.url || ''
|
||||||
|
ElMessage.success('上传成功')
|
||||||
|
}
|
||||||
|
|
||||||
const handleDelete = async (row: any) => {
|
const handleDelete = async (row: any) => {
|
||||||
try {
|
try {
|
||||||
await ElMessageBox.confirm('确定要删除该资源吗?用户将无法再看到。', '提示', { type: 'warning' })
|
await ElMessageBox.confirm('确定要删除该资源吗?用户将无法再看到。', '提示', { type: 'warning' })
|
||||||
|
|||||||
@@ -19,6 +19,7 @@ class DirectUploadService
|
|||||||
{
|
{
|
||||||
/** 视频允许的扩展名(沿用 config/project.file_video) */
|
/** 视频允许的扩展名(沿用 config/project.file_video) */
|
||||||
public const TYPE_VIDEO = 'video';
|
public const TYPE_VIDEO = 'video';
|
||||||
|
public const TYPE_VOICE = 'voice';
|
||||||
|
|
||||||
/** 默认凭证有效期 30 分钟 */
|
/** 默认凭证有效期 30 分钟 */
|
||||||
public const DEFAULT_DURATION = 1800;
|
public const DEFAULT_DURATION = 1800;
|
||||||
@@ -26,6 +27,7 @@ class DirectUploadService
|
|||||||
/** 允许扩展类型 → 大小上限(字节) */
|
/** 允许扩展类型 → 大小上限(字节) */
|
||||||
private const MAX_SIZE = [
|
private const MAX_SIZE = [
|
||||||
self::TYPE_VIDEO => 2 * 1024 * 1024 * 1024, // 2GB
|
self::TYPE_VIDEO => 2 * 1024 * 1024 * 1024, // 2GB
|
||||||
|
self::TYPE_VOICE => 500 * 1024 * 1024, // 500MB
|
||||||
];
|
];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -144,6 +146,7 @@ class DirectUploadService
|
|||||||
{
|
{
|
||||||
return match ($type) {
|
return match ($type) {
|
||||||
self::TYPE_VIDEO => FileEnum::VIDEO_TYPE,
|
self::TYPE_VIDEO => FileEnum::VIDEO_TYPE,
|
||||||
|
self::TYPE_VOICE => FileEnum::FILE_TYPE,
|
||||||
default => FileEnum::FILE_TYPE,
|
default => FileEnum::FILE_TYPE,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user