讲师中心 微信公众号
AI工具推荐 视频效率加速

uni-app上传视频功能实现 uni-app拍摄视频并上传服务器

秋丽姑娘_7631

秋丽姑娘_7631

发布时间:2026-05-15 10:18:22

|

507人浏览过

|

来源于php中文网

原创

必须用uni.chooseVideo,别碰uni.camera;后者仅支持预览和基础控制,不返回文件路径,无法上传;前者跨端可用,返回tempFilePath等元信息,是上传唯一可靠入口。

uni-app上传视频功能实现 uni-app拍摄视频并上传服务器

uni-app调用摄像头拍视频用uni.chooseVideo还是uni.camera?

直接说结论:**必须用uni.chooseVideo,别碰uni.camera**。后者是原生组件封装,仅支持预览和基础控制,不提供录制完成后的文件路径或临时地址,根本没法上传。

uni.chooseVideo才是标准、跨端(App/H5/小程序)可用的拍摄+选择入口,它返回tempFilePath(本地临时路径)和durationsize等元信息,这才是上传的起点。

  • H5端调用的是<input type="file" accept="video/*">,不支持直接调起摄像头,但用户可选本地视频
  • 微信小程序中sourceType: ['camera']能强制唤起摄像机;App端(iOS/Android)也支持,但需在manifest.json里声明相机权限
  • 注意maxDuration参数:iOS对超过10分钟的视频会截断,建议设为60秒以内,避免返回空tempFilePath

拿到tempFilePath后怎么传到服务器?

不能直接把tempFilePath当URL发给后端——它是本地沙盒路径,只在当前会话有效,且不同平台格式不同(如iOS是file:///var/.../xxx.mp4,Android可能是file://或blob:)。必须用uni.uploadFile走二进制上传流程。

uni-app
uni-app

uni-app 是基于 Vue 的跨端开发框架,适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载
  • 务必设置name: 'file'(或后端约定的字段名),否则后端收不到文件流
  • filePath必须传tempFilePath值,不是res.tempFilePath对象本身
  • 加header带token时,注意H5端可能被CORS拦截,得让后端配置Access-Control-Allow-Headers: Authorization
  • 大视频(>50MB)容易超时,建议显式设置timeout: 600000(10分钟),并配合后端分片上传逻辑(见下一条)
uni.uploadFile({
  url: 'https://api.example.com/upload',
  filePath: res.tempFilePath,
  name: 'file',
  header: { 'Authorization': 'Bearer xxx' },
  timeout: 600000,
  success: (uploadRes) => {
    console.log('上传成功', uploadRes.data)
  }
})

上传失败常见报错和对应解法

错误往往不出现在代码语法,而在路径、权限、格式、服务端限制这几个环节交叉出问题。

  • uploadFile:fail invalid file path → 检查res.tempFilePath是否为空或undefined,iOS真机拍摄后偶尔因权限或存储异常导致为空,加if (!res.tempFilePath) return兜底
  • uploadFile:fail request:fail net::ERR_CONNECTION_REFUSED → H5端常见,确认后端域名已加白名单(h5.usingComponents无关,是h5.domainWhiteList配置项)
  • uploadFile:fail HTTP ERROR 413 → Nginx默认限制body大小为1MB,需改client_max_body_size 200m;;Spring Boot要配spring.servlet.multipart.max-file-size=200MB
  • 微信小程序提示“上传失败”但无具体错误 → 开启uni.uploadFile的fail回调,打印err.errMsg,大概率是request:fail url not in domain list,检查mp-weixin.request.containSubDomain是否为true且域名已填入小程序后台

真机调试时视频路径和大小为什么和预期不符?

这是跨端差异最隐蔽的一环:不同平台对视频的自动转码策略不同,直接影响size、duration甚至tempFilePath的可读性。

  • Android真机(尤其低端机)常把HEVC编码视频转成MP4+AVC,size可能翻倍,duration不准(显示比实际长)
  • iOS模拟器无法调用摄像头,必须真机测试;iOS 15+对maxDuration更敏感,设为61秒可能直接返回errCode: -1
  • H5端选本地视频时,tempFilePath是blob:开头的URL,uni.uploadFile内部能处理,但别试图用uni.downloadFile去“下载”它——那是个无效操作
  • 关键动作:上传前用uni.getFileInfo校验文件存在性和大小,避免传一个损坏或0字节的tempFilePath

真正麻烦的从来不是API调用几行代码,而是每个平台对“视频”二字的理解根本不一致——iOS觉得是AVC+MP4,Android可能塞个HEVC,H5甚至拿不到原始编码信息。上传前多打一行console.log(res),比查三小时文档有用。

热门AI工具

更多
豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2723

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

5903

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6850

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

6598

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

943

2024.05.22

服务器是什么
服务器是什么

服务器是一种计算机硬件设备或软件程序,它具有强大的计算和存储能力,用请求、存储数据和提供服务。它在互联网中着关重要的作用,为用户提供各种服务和资源。本专题为大家提供服务器相关的文章、下载、课程内容,供大家免费下载体验。

457

2023.08.15

连接apple id服务器时出错
连接apple id服务器时出错

连接apple id服务器时出错的原因包括网络连接问题、服务器问题、Apple ID账户问题、设备问题、防火墙或安全软件问题、时间和日期设置问题、Apple服务器维护等。本专题为大家提供apple id相关的文章、下载、课程内容,供大家免费下载体验。

960

2023.09.08

搭建互联网服务器
搭建互联网服务器

搭建互联网服务器需要:1、选择合适的硬件和操作系统,第一步是选择合适的硬件和操作系统;2、安装和配置操作系统,是搭建互联网服务器的关键步骤;3、安装和配置服务器软件,是搭建互联网服务器的下一步,常见的服务器软件包括Apache、Nginx、Tomcat等;4、配置防火墙和安全性,是搭建互联网服务器的重要步骤;5、域名解析和配置,是搭建互联网服务器的最后一步。

3232

2023.09.19

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

40

2026.10.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn