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) }) })

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM