uniapp-上传图片、上传视频

基于 uniapp 的应用上传图片/视频资源的实现：

功能涉及的主要 uniapp API 如下：

1.选择图片：uni.chooseImage(OBJECT) | uni-app官网

2.选择视频：uni.chooseVideo(OBJECT) | uni-app官网

3.上传文件：uni.uploadFile(OBJECT) | uni-app官网

下面分别贴出示例代码：

上传图片

        // 上传图片async chooseImages() {uni.showLoading({mask: true,title: '上传中...'})// uploadFile 存储需要上传的文件let uploadFile = ''// 1.选择图片（这里只能单选）const res = await uni.chooseImage({count: 1,    // 最多可以选择的图片张数，默认9// sizeType: ['compressed'],     // original 原图，compressed 压缩图，默认二者都有sourceType: ['album'],      // album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项});// console.log('res:', res);if(res.length < 2) {       // 小于2则没有选择图片uni.hideLoading()return}uploadFile = res[1].tempFilePaths[0]; // 拿到选择的文件var that1 = this;// 2.将选择的图片上传到目标服务器const arr = await uni.uploadFile({// 需要上传的地址url: that1.vuex_uploadAction,// filePath  需要上传的文件filePath: uploadFile,name: 'file',timeout: 2000,     // 超时时间header: {        // HTTP 请求 Header, header 中不能设置 Referer。token: that1.vuex_token     // 挂载请求头为用户的 token},});// console.log(arr);let data = JSON.parse(arr[1].data)console.log('data:', data);if(data.code !== 1) {  // 图片上传失败了uni.hideLoading()that1.$u.toast(data.msg)return}// 上传成功(把上传成功后的文件路径 push 到页面需要显示的图片数据列表中)that1.fileList.push(data.data.fullurl)that1.formData.photo_url.push(data.data.url)// console.log(that1.fileList);uni.hideLoading()},

注：示例代码已封装为一个方法，可直接调用，需要自定义之处可自行参照 API 文档修改，比如从相册选图还是打开相机拍照、可上传的图片数量等

上传视频

        // 上传视频async chooseVideo() {uni.showLoading({mask: true,title: '上传中...'})// uploadFile 存储需要上传的文件let uploadFile = ''// 1.选择要上传的视频const res = await uni.chooseVideo({maxDuration: 60,        // 拍摄视频最长拍摄时间，单位秒。最长支持 60 秒。sourceType: ['album'],     // album 从相册选视频，camera 使用相机拍摄，默认为：['album', 'camera']});uploadFile = res[1].tempFilePath;// console.log(uploadFile);var that2 = this;// 2.上传所选视频到服务器const arr = await uni.uploadFile({// 需要上传的地址url: that2.vuex_uploadAction,// filePath  需要上传的文件filePath: uploadFile,name: 'file',header: {token: that2.vuex_token       // 挂载请求头为用户的 token},});let data = JSON.parse(arr[1].data)console.log('data:', data);if(data.code !== 1) {      // 视频上传失败了uni.hideLoading()that1.$u.toast(data.msg)return}// 上传成功(把上传成功后的文件路径 push 到页面需要显示的视频数据列表中)that2.uploadVideoUrl = data.data.fullurlthat2.formData.video_url = data.data.urluni.hideLoading()}

扩展

uniapp 还整合提供了上传媒体文件(图片/视频)的 API： uni.chooseMedia 可用于上传图片和视频。若有兴趣可自行打开链接测试使用。

uniapp-上传图片、上传视频相关推荐

wangeditor: 上传图片+上传视频+上传附件(自定义)完整使用
wangeditor: 上传图片+上传视频+上传附件(自定义)完整使用一:项目需求:①角色为管理员可以新增编辑文章 + ②点击可以看文章详情 +③ 角色为管理员可以修改编辑文章二:效果: ①角色为 ...
点击上传图片/上传视频
一.点击上传图片 ····结构:<div class="upload-wrap"><div class="upload-input">& ...
微信小程序实现上传视频 / 上传图片功能以及整合上传视频 / 上传图片功能(超详细)
微信小程序有自己封装好的我们直接拿过来用就可以了接下来我们看看如何实现的吧上传图片功能效果如下: 单图上传 Page({/*** 页面的初始数据*/data: {imgList: "& ...
uni-app上传视频在手机上上传失败，在web端上传成功
最近在写uni-app,上传视频的时候在web端电脑上没有链接手机调试,正常但是!!当我打包在手机上上传视频的时候上传不上去,当我用手机连接电脑调试的时候(手机和电脑一定要在同一个局域网)发现上传视 ...
uniapp图片上传，uniapp视频上传，uniapp附件上传，uniapp上传文件、uniapp文件上传组件
uniapp文件上传组件,支持图片.视频上传 html部分: <template><view class="annex-wrap"><view cla ...
JS任意截图并上传图片，上传视频、上传文件
** JS截图上传图片 ** 在前端WEB开放过程中,经常使用上传图片.上传视频.上传音频以及上传其他文件等,通常都使用到各种上传插件,但是很多插件只是单纯的上传文件,不具备图片截图,即使有也很传统, ...
MVC+API 实现tinymce富文本编辑器上传图片、上传视频
首先是要下载一个版本,这里我自己用的放到GitHub上了 https://github.com/dhgr1/tinymce 之前我试过官网的以及别的地方的,但都会报错,我也没搞清楚原因,你们可以自己去 ...
uniapp 上传视频获取视频封面图
// 上传视频或图片 uni.chooseMedia({// 上传数量count: 1,// 限制仅上传视频mediaType: ["video"],// 获取临时储存的信息suc ...
uni-app上传视频
上传单个视频 //html <view class="add_picture"><label class="title">视频</ ...
vant weapp 多选上传图片_使用vant组件upLoad上传视频或图片
使用vant的uploader 组件上传视频或图片, /* 预先浏览显示 */ :key="v" @click="delImg(v)" class=" ...

uniapp-上传图片、上传视频

上传图片

上传视频

扩展

uniapp-上传图片、上传视频相关推荐

最新文章

热门文章