小程序上传图片视频封装

Posted L.t

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序上传图片视频封装相关的知识,希望对你有一定的参考价值。

小程序图片上传封装

app.js中 写入

  wxPromisify(fn) {
    return function (obj = {}) {
      return new Promise((resolve, reject) => {
        obj.success = function (res) {
          resolve(res)
        }
        obj.fail = function (res) {
          reject(res)
        }
        fn(obj)//执行函数,obj为传入函数的参数
      })
    }
  }

  在utils文件夹下新建mediaUtils.js文件

 

let app = getApp();


var chooseImage = app.wxPromisify(wx.chooseImage) // 从本地相册选择图片或使用相机拍照
var chooseVideo = app.wxPromisify(wx.chooseVideo) // 拍摄视频或从手机相册中选视频
var getImageInfo = app.wxPromisify(wx.getImageInfo) // 获取图片信息

  图片上传临时信息目录

// 获取图片临时目录信息
function getImagePath(count, sizeNum, sourceNum) {
  let sizeType = []
  switch (sizeNum) {
    case ‘1‘:
      sizeType = ["original"];
      break;
    case ‘2‘:
      sizeType = ["compressed"];
      break;
    default:
      sizeType = [‘original‘, ‘compressed‘];
      break;
  }
  let sourceType = []
  switch (sourceNum) { 
    case ‘1‘:
      sourceType = ["album"];
      break;
    case ‘2‘:
      sourceType = ["camera"];
      break;
    default:
      sourceType = [‘album‘, ‘camera‘];
      break;
  }
  let ref = false;
  return new Promise(function(resolve, reject) {
    chooseImage({
      count: count, //最多可以选择的图片张数
      sizeType: sizeType, //所选的图片的尺寸
      sourceType: sourceType, //选择图片的来源
    }).then(res => {
      resolve(res)
    })
  })
}

  从本地相册选择图片或使用相机拍照

function getImageObj(count, sizeNum, sourceNum) {
  return new Promise(function(resolve, reject) {
    getImagePath(count, sizeNum, sourceNum).then(res => {
      if (res.tempFiles.length > 0) {
        var promise = Promise.all(res.tempFiles.map((item, index) => {
          return new Promise(function(resolve, reject) {
            let image = {
              size: item.size
            }
            getImageInfo({
              src: item.path
            }).then(res => {
              image.sizeStr = getImageSize(image.size)
              image.width = res.width
              image.height = res.height
              image.path = res.path
              image.type = res.type
              resolve(image);
            })
          });
        })).then(res => {
          resolve(res)
        })
      }
    })
  })
}

  获取图片大小MB

var getImageSize = function(size) {
  var sizeNum = size / 1024
  if (sizeNum > 1024) {
    sizeNum = (sizeNum / 1024).toFixed(2) + "MB"
  } else {
    sizeNum = sizeNum.toFixed(2) + "KB"
  }
  return sizeNum
}

   上传视频、获取视频信息

function getVideoInfo(sourceTypeNum, maxDuration, compressed) {
  let sourceType = []
  switch (sourceTypeNum) { //视频选择的来源 
    case 1:
      sourceType = [‘album‘]
      break;
    case 2:
      sourceType = [‘camera‘]
      break;
    default:
      sourceType = [‘album‘, ‘camera‘]
      break;
  }
  console.log(sourceType, sourceTypeNum)
  return new Promise(function(resolve, reject) {
    chooseVideo({
      sourceType: sourceType,
      compressed: compressed, //是否压缩所选择的视频文件
      maxDuration: maxDuration //拍摄视频最长拍摄时间,单位秒 默认60
    }).then(res => {
      res.path = res.tempFilePath   //选定视频的临时文件路径 (本地路径)
      res.type = res.path.substring(res.path.lastIndexOf(‘.‘) + 1)
      res.cover = res.thumbTempFilePath
      resolve(res)
    })
  })
}

  最后导出文件

module.exports = {
  getImagePath: getImagePath,
  getImageObj: getImageObj,
  getImageInfo: getImageInfo,
  getVideoInfo: getVideoInfo
};

  

以上是关于小程序上传图片视频封装的主要内容,如果未能解决你的问题,请参考以下文章

小程序多图片上传组件封装及使用

图略小程序怎么上传图片

5行代码实现微信小程序图片上传与腾讯免费5G存储空间的使用

小程序封装多张图片上传api

微信小程序用户上传用户图片数据太大,怎么样能降低图片像素

微信小程序微信相册是无限容量的么,有人说可以把手机里的图片视频上传而且没有容量限制