Skip to content

S
source-trace-manage-go
Commit 0ea54f4f authored by wcmoon's avatar wcmoon
Browse files
Options

feat:适配视频和音频上传和查看

parent cc187b84
Hide whitespace changes
Inline Side-by-side
Showing with 249 additions and 31 deletions
src/entry/czt/views/SignIn.vue
View file @ 0ea54f4f
......@@ -8,24 +8,19 @@ import {Component, Vue} from "vue-property-decorator";
},
})
export default class signIn extends Vue {
public created(): void {
const id = 57; // todo 从对方 iframe 拿数据
const res = {
token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2MTcyNjc0OTQsImlhdCI6MTYxNzAwODI5NCwidXNlcl9pbmZvIjoiZXlKcFpDSTZOVGQ5In0.zIIIXC68FdWiyPSlFCgBTAYxem1TQBKAwpf5IG3j5t8'
};
/* // todo 接口待适配
public async created() {
const id = '123124'; // todo 从对方 iframe 拿数据
// todo 接口待适配
const res = await this.$ajax({
type: "post",
url: 'http://124.71.144.118:46789/api/user/demo/token',
params: {"id": "123124"},
params: { id },
});
*/
if (res) {
// todo 处理自动登录跳转
sessionStorage.setItem(`user`, JSON.stringify({
id,
token: res.token
token: res.data.token
}));
this.$router.push({ path: "/categoryManage" });
}
......
src/entry/czt/views/template/LocalFiles.vue 0 → 100644
View file @ 0ea54f4f
<template>
<div>
<div class="show" v-for="(item, index) in files" :key="index">
<i class="iconfont" :class="iconClass"></i>
<p @click="preview(item)">{{ item.name }}</p>
<div class="show-rigth">
<i class="iconfont iconxingzhuang2"></i>上传成功
<i class="iconfont iconshanchu1" @click="deletePDF(index)"></i>
</div>
</div>
<!-- 视频和音频预览 -->
<common-dialog
v-if="showSource"
@closePopup="showSource = false"
showMask
>
<div>
<video v-if="this.fileType === 'video'" controls="controls" style="outline: none" :src="Vurl"></video>
<audio v-if="this.fileType === 'audio'" controls="controls" style="outline: none" :src="Aurl"></audio>
</div>
</common-dialog>
</div>
</template>
<script lang="ts">
import {Component, Watch, Prop, Vue} from "vue-property-decorator";
import CommonDialog from "@/components/CommonDialog.vue";
@Component({
components: {
CommonDialog
},
})
export default class localFiles extends Vue {
@Prop({
type: Array,
default: [],
})
files!: [];
@Prop(String) fileType!: string;
public iconClass!:string;
public showSource:boolean = false;
public Vurl:string = '';
public Aurl:string = '';
@Watch('fileType')
public onChange(newVal: string, oldVal: string) {
this.iconClass = this.getClassICon(newVal);
}
public mounted() {
this.iconClass = this.getClassICon(this.fileType);
}
public getClassICon(type: string) {
const fileTypeMap:any = {
'pdf': {
iconClass: 'iconPDF',
},
'picture': {
iconClass: 'iconshipinwenjian',
},
'audio': {
iconClass: 'iconyinpin-copy',
},
'video': {
iconClass: 'iconshipinwenjian',
}
};
return fileTypeMap[type].iconClass;
}
/**
* show file uploaded by different file type
* @param item
*/
public preview(item: { url: string }) {
const funcMap:any = {
pdf: this.openPDF,
video: this.playVideo,
audio: this.playAudio
};
funcMap[this.fileType](item);
}
public openPDF(item: { url: string }) {
window.open(item.url);
}
public playVideo(item: { url: string }) {
this.showSource = true;
this.Vurl = item.url;
}
public playAudio(item: { url: string }) {
this.showSource = true;
this.Aurl = item.url;
}
public deletePDF(index: number) {
// todo 删除文件
}
}
</script>
<style lang="less" scoped>
.show {
line-height: 1;
cursor: pointer;
padding-top: 20px;
padding-bottom: 4px;
width: 670px;
p {
font-size: 14px;
margin: 0;
display: inline-block;
padding: 0;
font-weight: 400;
color: #353535;
}
.iconPDF {
color: #fe572f;
font-size: 16px;
margin-right: 6px;
}
.iconshipinwenjian {
// font-size: 22px;
margin-right: 6px;
float: left;
color: rgba(51, 112, 255);
}
.iconyinpin-copy {
color: #33c8ff;
font-size: 16px;
margin-right: 6px;
}
.show-rigth {
float: right;
font-size: 14px;
.iconshanchu1 {
color: #b6b5ba;
font-size: 12px;
margin-left: 10px;
}
.iconxingzhuang2 {
margin-right: 2px;
color: #33c724;
}
}
}
</style>
src/entry/czt/views/template/editTemplate.vue
View file @ 0ea54f4f
......@@ -55,8 +55,8 @@
<div class="add_template_item">
<span class="item_title needed">存证类型</span>
<div class="item_choice" v-for="item in allTypes" :key="item[1]">
<input :id="item[1]" type="radio" name="type" :value="item[0]" v-model="fileType">
<label :for="item[1]" class="iconfont" :class="fileType === item[0] ? 'iconquedingbeifen' : 'iconbianzubeifen' ">{{ item[0] }}</label>
<input :id="item[1]" type="radio" name="type" :value="item[1]" v-model="fileType">
<label :for="item[1]" class="iconfont" :class="fileType === item[1] ? 'iconquedingbeifen' : 'iconbianzubeifen' ">{{ item[0] }}</label>
</div>
</div>
<div class="add_template_item">
......@@ -70,18 +70,20 @@
<div class="add_template_item">
<div class="upload_btn">
<i class="iconfont iconshangchuan upload_icon"></i>
<p class="upload_title">上传{{ fileType }}</p>
<p class="upload_title">上传{{ fileTypeText }}</p>
<p class="upload_note">注：仅支持20M以下的文件</p>
<input ref="inputDom" type="file"
@click.stop
@change.stop="fileChange"
:accept="inputAccept"
hidden
>
</div>
</div>
<div class="add_template_item">
<div class="add_template_item" v-show="false">
<p id="note"><span class="item_title">支持格式：</span>{{ supprtType }}</p>
</div>
<local-files :files="files" :file-type="fileType"/>
</div>
</div>
</div>
......@@ -169,6 +171,7 @@ import ModifyTitle from "@/components/editTemplate/ModifyTitle.vue"; //修改标
// 未认证提示组件
import Uncertified from "@/components/Uncertified.vue";
import ChooseClassification from "@/components/editTemplate/ChooseClassification.vue";
import LocalFiles from "@/entry/czt/views/template/LocalFiles.vue";
// import guide from "@/views/template/AddTemplate/guide.vue";
@Component({
components: {
......@@ -182,6 +185,7 @@ import ChooseClassification from "@/components/editTemplate/ChooseClassification
ModifyTitle,
Uncertified,
ChooseClassification,
LocalFiles
},
})
export default class editTemplate extends Vue {
......@@ -209,13 +213,16 @@ export default class editTemplate extends Vue {
public ClassificationPopups: boolean = false;
public MemoryCardType: String = ""; //存证类型
public supprtType: string = 'wmv'; // 允许上传的文件格式
public fileType: string = '视频'; // 文件类型
public fileType: string = 'pdf'; // 文件类型
public fileTypeText: string = 'PDF';
public allTypes: any = [
['PDF', 'pdf'],
['图片', 'picture'],
['音频', 'audio'],
['视频', 'video']
]; // 所有文件类型
public inputAccept: string = 'application/pdf';
public files = [];
// 系统模板>建立个人模板or建立存证
// 个人模板>建立存证or更新模板
// 建立存证>保存存证or保存模板
......@@ -229,6 +236,30 @@ export default class editTemplate extends Vue {
if (this.existingEvidenceList.length > 0 && !this.ShowPastData)
this.existingEvidenceList[0].name = newVal;
}
@Watch("fileType")
public onFileTypeChange(newVal: string, oldVal: string) {
const fileTypeMap:any = {
'pdf': {
text: 'PDF',
accept: 'application/pdf'
},
'picture': {
text: '图片',
accept: 'image/jpeg, image/png'
},
'audio': {
text: '音频',
accept: 'audio/*'
},
'video': {
text: '视频',
accept: 'video/*'
}
};
this.files = []; // 切换类型之后文件清空
this.fileTypeText = fileTypeMap[newVal].text;
this.inputAccept = fileTypeMap[newVal].accept;
}
public async created() {
// 取值
const query = this.$route.query;
......@@ -782,27 +813,55 @@ export default class editTemplate extends Vue {
}
}
}
/**
* get files' URL by hash and show uploaded result
* @param hashes: array of hashes, one for a file
*/
public async getUploadedFiles(hashes: string[]) {
const res:any = await this.$ajax({
type: 'post',
url: GO_URLS.getFiles,
params: {
hashes: hashes
}
});
console.log(res);
if (res?.data) {
this.files = res.data.files;
}
}
/**
* merge chunks
* @param current: params for request
*/
public async mergeChunkFile(current: any) {
const res:any = await this.$ajax({
type: "post",
url: GO_URLS.chunkMerge,
params: {
file_hash: current.file_hash,
file_name: current.file_name
}
});
console.log(res);
this.getUploadedFiles([current.file_hash]);
}
/**
* 分块上传文件
* upload chunks
* @param current current blob to upload
* @param length length of buffer
*/
public async uploadFileChunk(current: any, length: number) {
return await this.$ajax({
const res:any = await this.$ajax({
type: "post",
url: GO_URLS.chunkCheck,
url: GO_URLS.chunkUpload,
params: current
// params: {
// file_hash: hash,
// },
});
// fileUpload(current).then((res) => {
// let { current_seq } = res.data;
// if (current_seq === length) {
// this.mergeChunkFile(current);
// }
// });
let { current_seq } = res.data;
if (current_seq === length) {
this.mergeChunkFile(current);
}
}
// 查询文件
public async checkFileChunkState(hash: string) {
......@@ -852,6 +911,7 @@ export default class editTemplate extends Vue {
if (is_done && file_info) {
// 上传完成
// todo 把文件显示在页面上
that.getUploadedFiles([fileHash.hex()]);
return;
}
const chunkRequests: any = [];
......@@ -876,10 +936,11 @@ export default class editTemplate extends Vue {
return Promise.all(chunkRequests);
});
};
//读取失败回调
// fileReader.onreeor = function (err) {
// // err.target.error;
// };
// 读取失败回调
fileReader.onerror = function (err) {
// err.target.error;
// todo 失败的处理
};
fileReader.readAsArrayBuffer(file);
}
}
......@@ -1386,6 +1447,7 @@ export default class editTemplate extends Vue {
border-radius: 4px;
text-indent: 25px;
font-weight: 300;
outline: none;
}
.upload_btn {
width: 670px;
......@@ -1419,6 +1481,7 @@ export default class editTemplate extends Vue {
top: 0;
left: 0;
display: inline-block;
cursor: pointer;
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment