feat: 首次提交
This commit is contained in:
peerless_hero
211
pages/component/form/uploadVideo/uploadVideo.vue
Normal file
211
pages/component/form/uploadVideo/uploadVideo.vue
Normal file
@ -0,0 +1,211 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 86 1 4 0 72 5 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">UploadVideo <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">UploadVideo 视频上传，拍摄或从手机相册中选择视频进行上传。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<view class="fui-section__title">自动上传/设置边框</view>
|
||||
<fui-upload-video immediate border-color="#FFB703" border-sytle="dashed" :url="url" ref="upload"
|
||||
@success="success" @error="error" @complete="complete">
|
||||
</fui-upload-video>
|
||||
<view class="fui-section__title">手动上传/自定义加号图标/背景</view>
|
||||
<view class="fui-btn__box">
|
||||
<fui-button type="gray" btn-size="medium" text="开始上传" bold @click="startUpload">
|
||||
</fui-button>
|
||||
</view>
|
||||
<fui-upload-video :width="340" :max="2" background="#333" addColor="#d1d1d1" :fileList="fileList" :url="url"
|
||||
ref="upload2" @success="success2" @error="error2" @complete="complete2">
|
||||
<fui-icon name="plussign" color="#d1d1d1" :size="80"></fui-icon>
|
||||
</fui-upload-video>
|
||||
<view class="fui-section__title">传入文件上传函数，返回一个promise</view>
|
||||
<fui-upload-video call-upload ref="uploader" @reupload="reUpload" @complete="complete3"></fui-upload-video>
|
||||
<view class="fui-btn__box">
|
||||
<fui-button :margin="['48rpx','0']" type="gray" btn-size="medium" text="调用upload方法上传" bold
|
||||
@click="callUpload">
|
||||
</fui-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
//上传接口地址
|
||||
url: 'https://ffa.firstui.cn/api/example/upload-file',
|
||||
//上传状态，用于保存或其他操作时做判断
|
||||
status: '',
|
||||
//上传的视频地址列表
|
||||
urls: [],
|
||||
//上传状态，用于保存或其他操作时做判断
|
||||
status2: '',
|
||||
//初始化已上传的视频列表
|
||||
fileList: ['https://ffa.firstui.cn/uploadfile/220831211231709.mp4'],
|
||||
//上传的视频地址列表
|
||||
urls2: [],
|
||||
//调用upload 方法上传
|
||||
status3: '',
|
||||
urls3: []
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.urls2 = this.fileList
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
},
|
||||
success(e) {
|
||||
console.log(e)
|
||||
//上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
|
||||
let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
|
||||
this.status = e.status
|
||||
if (res.data.url) {
|
||||
//处理结果返回给组件
|
||||
//data.url为上传成功后返回的视频地址
|
||||
//e.index为视频索引值
|
||||
this.$refs.upload.result(res.data.url, e.index)
|
||||
}
|
||||
},
|
||||
error(e) {
|
||||
this.status = e.status
|
||||
},
|
||||
complete(e) {
|
||||
this.status = e.status
|
||||
this.urls = e.urls
|
||||
if (this.status === 'success' && e.action === 'upload') {
|
||||
this.fui.toast('上传完成！')
|
||||
//已上传完成的视频列表 this.urls
|
||||
console.log(this.urls)
|
||||
}
|
||||
},
|
||||
success2(e) {
|
||||
console.log(e)
|
||||
//上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
|
||||
let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
|
||||
this.status = e.status
|
||||
if (res.data.url) {
|
||||
//处理结果返回给组件
|
||||
//data.url为上传成功后返回的视频地址
|
||||
//e.index为视频索引值
|
||||
this.$refs.upload2.result(res.data.url, e.index)
|
||||
}
|
||||
},
|
||||
error2(e) {
|
||||
this.status2 = e.status
|
||||
uni.showModal({
|
||||
content: JSON.stringify(e)
|
||||
})
|
||||
},
|
||||
complete2(e) {
|
||||
this.status2 = e.status
|
||||
this.urls2 = e.urls
|
||||
if (this.status2 === 'success' && e.action === 'upload') {
|
||||
this.fui.toast('上传完成！')
|
||||
//已上传完成的视频列表 this.urls
|
||||
console.log(this.urls)
|
||||
}
|
||||
},
|
||||
startUpload() {
|
||||
if (!this.status2 || this.status2 !== 'preupload') {
|
||||
this.fui.toast('请选择需要上传的视频！')
|
||||
return
|
||||
}
|
||||
//开始上传
|
||||
this.$refs.upload2.start()
|
||||
},
|
||||
/*
|
||||
以下为调用upload方法手动上传的所有方法内容
|
||||
*/
|
||||
//调用upload方法上传时传入的回调函数
|
||||
uploadFile(filePath, index) {
|
||||
//filePath：上传的临时文件路径；index：位置索引值（更新上传进度使用）
|
||||
console.log('upload filePath', filePath)
|
||||
|
||||
// 文件上传的函数，返回一个promise
|
||||
//上传成功后返回上传后的视频地址，上传失败则返回false即可
|
||||
return new Promise((resolve, reject) => {
|
||||
//调用api上传，所有需要参数自行补充
|
||||
const uploadTask = uni.uploadFile({
|
||||
url: this.url,
|
||||
name: 'file',
|
||||
// header: {},
|
||||
// formData: {},
|
||||
filePath: filePath,
|
||||
success: (res) => {
|
||||
//以下成功或失败逻辑根据接口自行处理
|
||||
const data = JSON.parse(res.data.replace(/\ufeff/g, "") || "{}")
|
||||
if (data.statusCode === 200) {
|
||||
//返回上传成功后的视频（约定返回格式，不可修改）
|
||||
resolve(data.data.url)
|
||||
} else {
|
||||
//上传失败（约定返回格式，不可修改）
|
||||
reject(false)
|
||||
}
|
||||
},
|
||||
fail: (res) => {
|
||||
//上传失败（约定返回格式，不可修改）
|
||||
reject(false)
|
||||
}
|
||||
})
|
||||
//更新上传进度
|
||||
uploadTask.onProgressUpdate((res) => {
|
||||
//调用方法更新组件内当前视频上传进度
|
||||
this.$refs.uploader.setProgress(res.progress, index)
|
||||
});
|
||||
})
|
||||
},
|
||||
callUpload() {
|
||||
//注意：此方法上传函数需要页面自行实现，如上 uploadFile（当组件内部方法无法满足时使用该方法自行去实现上传）
|
||||
if (!this.status3 || this.status3 !== 'preupload') {
|
||||
this.fui.toast('请选择需要上传的视频！')
|
||||
return
|
||||
}
|
||||
//调用upload 方法上传，并传入函数，此时请勿传入index值
|
||||
this.$refs.uploader.upload(this.uploadFile)
|
||||
},
|
||||
//重新上传
|
||||
reUpload(e) {
|
||||
/*
|
||||
callUpload 中上传失败时会出现重新上传按钮
|
||||
点击重新上传按钮触发（仅call-upload 为true 时有效）
|
||||
*/
|
||||
//当前上传按钮索引值
|
||||
console.log(e.index)
|
||||
//调用upload 方法上传，并传入函数，且此时需要传入index值
|
||||
this.$refs.uploader.upload(this.uploadFile, e.index)
|
||||
},
|
||||
complete3(e) {
|
||||
console.log(e)
|
||||
this.status3 = e.status
|
||||
this.urls3 = e.urls
|
||||
if (this.status3 === 'success' && e.action === 'upload') {
|
||||
this.fui.toast('上传完成！')
|
||||
//已上传完成的视频列表 this.urls3
|
||||
// console.log(this.urls3)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-btn__box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.fui-page__bd {
|
||||
padding-left: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user