微信小程序同时上传视频和图片(支持多选)
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
随着小程序的的不断发展,小程序技术也越来越广泛了,很多人都要了解学习小程序是必不可少的技能,本文就介绍了小程序上传图片和视频的教程(废话不多说,上代码)。 保姆级别注释。
二、使用步骤
1.小程序页面代码
<image class="item-img" bindtap="getimg" style="margin-right:20rpx" src="https://applets.jinchehui.com/static/images/uploadImg.svg"></image>
2.小程序JS内代码
getimg() { const that = this wx.chooseMedia({ count: 9, //上传数量限制 mediaType: [image,video,mix], //上传类型 可以是image图片 也可以是video视频 mix是图片视频都选 sourceType: [album, camera], //仅对 mediaType 为 image 时有效,是否压缩所选文件 maxDuration: 30, //拍摄视频最长拍摄时间,单位秒。时间范围为 3s 至 60s 之间。不限制相册。 camera: back, //仅在 sourceType 为 camera 时生效,使用前置或后置摄像头 success(res) { //console.log(res) res.tempFiles.forEach(function(item){ //循环出结果 循环选中的图片和视频 console.log(item) console.log(item.tempFilePath) // if(item.fileType == "image"){ // }else if(item.fileType == "video"){ // } wx.uploadFile({ //获取到了就开始上传图片 使用 wx.uploadFile url: /updatefile?file=abc, //对应自己程序后台的 接受文件的 地址 filePath: item.tempFilePath, //需要上传的文件路径 选中之后会返回的 name: file, //这个是上传文件的参数名 对应后台通过这个参数名读取到文件就行了 formData: { type: item.fileType //文件的类型 图片是image 视频是video }, success(res) { console.log(res) //上传成功之后自己根据自己的需求操作就行了 } }) }) } }) }
总结
提示:这里对文章进行总结: 以上就是今天要讲的内容,本文仅仅简单介绍了小程序上传图片和视频的使用, 让我们尽快的满足自己的需求.