153 lines
5.0 KiB
Vue
153 lines
5.0 KiB
Vue
<script setup>
|
||
// 引入依赖
|
||
import api from '@/api/course'
|
||
// import com_api from '@/api/common'
|
||
// import custom from '@/utils/custom'
|
||
// import WarningBar from '@/components/warningBar/warningBar.vue'
|
||
import {ref,onMounted,watch,inject } from 'vue'
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
import { useRouter, useRoute } from 'vue-router'
|
||
const router = useRouter()
|
||
const route = useRoute()
|
||
import { useUserStore } from '@/pinia/modules/user'
|
||
const userStore = useUserStore()
|
||
// import chapterCom from '../components/chapter.vue'
|
||
const props = defineProps(['url_name'])
|
||
const emit = defineEmits(['on-success'])
|
||
import { clients, getNowDate } from '@/utils'
|
||
import { getToken } from '@/utils/auth'
|
||
// 变量
|
||
const headers = ref({ Authorization: 'Bearer ' + getToken() })
|
||
const drawer = ref(false)
|
||
const queryParams =ref({
|
||
pageIndex:1,
|
||
pageSize:10,
|
||
name:'',
|
||
subject:''
|
||
})
|
||
// 生命周期
|
||
const subjectList = inject('subjectList')
|
||
const current_subject = inject('current_subject')
|
||
onMounted(() => {
|
||
// console.log(headers.value)
|
||
})
|
||
|
||
// 方法
|
||
function openExercisesWinFunc() {
|
||
drawer.value = true
|
||
}
|
||
function onSubmit() {
|
||
|
||
}
|
||
function onReset() {
|
||
queryParams.value = {
|
||
pageIndex:1,
|
||
pageSize:10,
|
||
name:''
|
||
}
|
||
}
|
||
async function httpUpload(file) { // 上传oss
|
||
console.log(file)
|
||
// this.$set(this.chapterTable.sel, 'percentage', 0)
|
||
// this.$set(this.chapterTable.sel, 'loading', true)
|
||
const client = clients()
|
||
// 判断扩展名
|
||
const tmpcnt = file.file.name.lastIndexOf('.')
|
||
const exname = file.file.name.substring(tmpcnt + 1)
|
||
const imgUrl = 'http://gwjxb.oss-cn-chengdu.aliyuncs.com'
|
||
const fileName = `static/uploadfile/${getNowDate()}/${file.file.uid}.${exname}`
|
||
await client.multipartUpload(fileName, file.file, {
|
||
progress: (p, cpt, res) => {
|
||
// 获取分片上传进度、断点和返回值。
|
||
// this.$set(
|
||
// this.chapterTable.sel,
|
||
// 'percentage',
|
||
// (Math.floor(p * 100) / 100) * 100
|
||
// )
|
||
// if (p === 1) {
|
||
// this.$set(this.chapterTable.sel, 'loading', false)
|
||
// }
|
||
},
|
||
parallel: 5, // 并发上传的分片数量
|
||
partSize: 1024 * 1024 * 20,
|
||
// headers,
|
||
// 指定meta参数，自定义Object的元信息。通过head接口可以获取到Object的meta数据。
|
||
meta: {
|
||
year: 2020,
|
||
people: 'test'
|
||
},
|
||
mime: file.type // 上传文件类型
|
||
})
|
||
// 填写Object完整路径，例如exampledir/exampleobject.txt。Object完整路径中不能包含Bucket名称。
|
||
const head = await client.head(fileName)
|
||
if (head.status === 200) {
|
||
// 上传成功之后添加媒体库
|
||
// this.addDepotFun(`${imgUrl}/${fileName}`, file.file.name)
|
||
// 数据赋值
|
||
const params = {
|
||
url:`${imgUrl}/${fileName}`,
|
||
url_name:file.file.name
|
||
}
|
||
// console.log(params)
|
||
emit('on-success',params)
|
||
// this.$set(this.chapterTable.sel, 'url', `${imgUrl}/${fileName}`)
|
||
// this.$set(this.chapterTable.sel, 'url_name', file.file.name)
|
||
}
|
||
}
|
||
</script>
|
||
<template>
|
||
<div>
|
||
<el-button size="small" type="primary" @click="openExercisesWinFunc">点击上传</el-button>
|
||
<div v-if="url_name">{{url_name}}</div>
|
||
<el-drawer v-model="drawer" title="媒体库" size="50%">
|
||
<div class="drawer-section">
|
||
<!-- 搜索框-->
|
||
<div class="search-box">
|
||
<el-form ref="searchForm" :inline="true" :model="queryParams">
|
||
<el-form-item label="课程名称">
|
||
<el-input v-model="queryParams.name" placeholder="根据课程名称进行查询" />
|
||
</el-form-item>
|
||
<el-form-item label="课程分类">
|
||
<el-select v-model="queryParams.subject" clearable placeholder="请选择">
|
||
<el-option
|
||
v-for="item in subjectList"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button>
|
||
<el-button size="small" icon="refresh" @click="onReset">重置</el-button>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-upload
|
||
:headers="headers"
|
||
class="upload-demo"
|
||
action
|
||
:http-request="httpUpload"
|
||
:show-file-list="false"
|
||
>
|
||
<el-button
|
||
size="small"
|
||
type="text"
|
||
>普通上传</el-button>
|
||
</el-upload>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<!-- 数据列表-->
|
||
<div class="list-box">
|
||
|
||
</div>
|
||
</div>
|
||
</el-drawer>
|
||
</div>
|
||
</template>
|
||
<style scoped>
|
||
.drawer-section{
|
||
padding: 10px;
|
||
}
|
||
</style>
|