cordova图片上传,视频上传(上传多个图片,多个视频)

1.下载插件(下载需要的即可)

cordova plugin add cordova-plugin-imagepicker(这个插件选择图片较为好看,并且只能获取图片)

cordova plugin add cordova-plugin-camera(获取单个视频,单个图片)

cordova plugin add cordova-plugin-media-capture(获取音频,视频,拍照)

2.上传多张图片或视频的数组(视频图片可以放在同一数组里)

var imgArr = []

3.cordova plugin add cordova-plugin-imagepicker

ImagePicker.getPictures((res) => {
     res.images.forEach((val) => {
           //塞到数组里
          imArr.push(val.uri)
    })
},(err)=>{console.log(err)},
{
    //配置
    quality: 80, //图片质量
    maximumImagesCount: 9  //限制上传的数量
}
}

cordova plugin add cordova-plugin-media-capture

navgator.device.capture.captureVideo(
      (mediaFiles) => {
           console.log(mediaFile[0])
           imgArr.push(mediaFile[0].localURL)
      },
      (err)=>{console.log(err)},
      options
)
options = {
     limit: 2,
     duration
}

cordova plugin add cordova-plugin-camera请看上传单个图片

4.批量上传(将imgArr上传)

除了cordova plugin add cordova-plugin-camera插件外,其余两个会默认安装Cordova-plugin-file

他会改变js中的file属性,所以这里要将他改回来,就可以了,用自己的接口通过formdata上传

var formdata = new Formdata()
var loopNum = 0
imgArr.forEach((val,index) => {
//cordova-plugin-file插件的方法 resolveLocalFileSystemURL(val,(fileEntry)
=>{
//获取file对象,和js的file不一样 fileEntry.file((file)
=>{
//读取
var reader = new FileReader() reader.onloadend = e => {
              //转化为Blob格式 const the_file
= new Blob([e.target.result],{type:file.type})
              //存入即可 formdata.append(
'image'+(index+1),the_file,file.name)
              //防止onloadend事件不按顺序执行 loopNum
++ if(loopNumm === imgArr.length){
//requestImgs函数是触发接口函数,自己写,将formdata传进入 requestImgs(formdata) } }
          //触发onloadend事件 reader.readAsArrayBuffer(file) }) })

 

posted @ 2019-09-24 19:38  走开,不要让我犯错误  阅读(1773)  评论(0编辑  收藏  举报