微信小程序同时上传视频和图片(支持多选)

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

前言

随着小程序的的不断发展,小程序技术也越来越广泛了,很多人都要了解学习小程序是必不可少的技能,本文就介绍了小程序上传图片和视频的教程(废话不多说,上代码)。 保姆级别注释。

二、使用步骤

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)						//上传成功之后自己根据自己的需求操作就行了  
                  }
                }) 

          })
           
        }
      }) 
  }

总结

提示:这里对文章进行总结: 以上就是今天要讲的内容,本文仅仅简单介绍了小程序上传图片和视频的使用, 让我们尽快的满足自己的需求.

经验分享 程序员 微信小程序 职场和发展