zoukankan      html  css  js  c++  java
  • 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) }) })
  • 相关阅读:
    毕业设计-1.11
    毕业设计-1.10
    毕业设计-1.09
    毕业设计-1.08
    毕业设计-1.07
    [工具]Maven的安装和配置【MyEclipse】
    毕业设计-1.06
    tomcat部署项目时省略项目名
    Jenkins实现iOS项目自动化打包(含踩坑记录)
    钉钉小程序封装网络请求
  • 原文地址:https://www.cnblogs.com/guan-shan/p/11580478.html
Copyright © 2011-2022 走看看