uview1.x上传视频
时间: 2025-02-19 14:11:34 浏览: 56
### 关于uView 1.x 版本中的视频上传功能
在uView 1.x版本中,实现视频上传主要依赖`uni.chooseVideo` API来选取本地视频文件并获取其临时路径。之后利用`uni.uploadFile`接口完成向服务器传输的过程[^1]。
对于具体操作而言,在前端页面定义按钮触发选择视频动作:
```html
<template>
<view class="content">
<!-- 添加一个用于点击选择视频的按钮 -->
<button type="primary" @click="chooseVid">选择视频</button>
<!-- 显示已选视频缩略图以及名称等信息 -->
<video v-if="localSrc !== ''" :src="localSrc"></video>
<!-- 提交表单按钮 -->
<button type="warn" @click="submitForm">提交</button>
</view>
</template>
```
接着是在Vue实例内部编写逻辑处理函数:
```javascript
<script>
export default {
data() {
return {
localSrc: '', // 存储所选视频的临时地址
}
},
methods: {
chooseVid() {
uni.chooseVideo({
sourceType: ['album'], // 可设置为['camera']仅限拍摄;默认两者都有
maxDuration: 60, // 录制最长时间限制(秒)
camera: 'back', // 使用前置还是后置摄像头,默认后置
success:(res)=>{
this.localSrc=res.tempFilePath;
}
});
},
submitForm(){
const uploadTask=uni.uploadFile({
url:'https://example.com/upload',// 替换成实际接收上传请求的服务端API URL
filePath:this.localSrc,
name:'file',
formData:{'user':'test'},// 额外携带的数据
success(uploadRes){
console.log('Upload Success:',JSON.parse(uploadRes.data));
},
fail(err){
console.error('Failed to Upload Video:',err);
}
});
// 监听进度变化事件可选
uploadTask.onProgressUpdate((progressRes) => {
console.log(`上传进度${progressRes.progress}%, 已经上传${progressRes.totalBytesSent}, 总大小${progressRes.totalBytesExpectedToSend}`);
});
}
}
}
</script>
```
此段代码展示了如何基于uView框架构建简易界面让用户挑选想要上传的视频片段,并将其发送至指定位置保存起来。需要注意的是服务端需做好相应的解析工作以便正确接收到客户端传递过来的信息。
阅读全文
相关推荐


















