小程序-多图上传和视频上传(优化版2.0,添加压缩功能)

这篇博客介绍了作者优化小程序多图和视频上传功能的过程,特别是新增了图片压缩功能。文章提供了优化后的js代码,并提醒读者自行配置七牛云请求地址和开发者服务器地址。作者还提到代码质量可能不高,欢迎网友反馈问题。

<------------------------------------------------------------------------------ 旧版本,新版本优化在底下  ------------------------------------------------------------------------------>

  1.  项目中需要一次多图上传和视频上传就封装了一个简单通用的js

  2. 使用很简单复制一下代码粘贴到一个空的js,我命名为chooseUpload,将这个文件放到项目文件夹名称为utils中,没有这个文件夹可以自己新建一个

  3. js代码如下:

const App = getApp();
//多图上传图片 、 单个上传视频
const uploadInit = function(){
	var up = uploadInit.prototype;//给方法添加属性
	//选择上传方式
	up.chooseUpload = function(obj){
		var that = this;
		//选择'相册选择'或'拍照上传'
		wx.showActionSheet({
		  itemList: ['相册选择','拍照上传'],
		  success (res) {
			if(res.errMsg == "showActionSheet:ok"){
				var tapType;
				if(res.tapIndex == 0){//相册选择
					tapType = "album";
				}else{//拍照上传
					tapType = "camera";
				}
				if(obj.chooseType == 0){//图片
					wx.chooseImage({
					  count: obj.count,//一次可上传数量
					  sizeType: ['original', 'compressed'],
					  sourceType: [tapType],
					  success (res) {
						  if(res.errMsg == 'chooseImage:ok'){
							  //获取七牛云参数--res.tempFilePaths图片的本地临时文件路径列表 (本地路径)
							  that.uploadQiNiuYun(res.tempFilePaths,obj);
						  }
					  }
					})
				}else{//视频
					var camera;
					if(obj.back == 0){//前摄像头
						camera = 'front';
					}else{//后摄像头
						camera = 'back';
					}
					wx.chooseVideo({
					  sourceType: [tapType],
					  maxDuration: obj.maxDuration,
					  camera: camera,
					  success(res) {
						//判断视频时长不能超出
						if(parseInt(res.duration) <= obj.maxDuration){
							//获取七牛云参数--res.tempFilePaths视频的本地临时文件路径列表 (本地路径)
							that.uploadQiNiuYun(res.tempFilePath,obj);
						}else{
							wx.showToast({
								title:"视频限制时长" + obj.maxDuration + "s",
								icon:"none",
								duration:1800
							})
						}
					  }
					})
				}
			}
		  },
		  fail (res) {
		    console.log(res.errMsg)
		  }
		})
	},
	//请求七牛云参数
	up.uploadQiNiuYun =  function(path,obj){
		var that = this;
		if(path){
		  // 选择七牛上传参数
		  App.post({
			url:'请求七牛云地址',
			type: 'POST',
			callback:function(res){
			  if(res.code == 1){
				  if(obj.chooseType == 0){//上传图片
					for(var i in path){
						wx.showLoading();//加载中
						//循环上传图片到七牛云
					 	that.imageUploadQiniu(path[i],res.object.domain,res.object.token,obj);
					} 
				  }else{//上传视频
					  //上传视频到七牛云
					  that.imageUploadQiniu(path,res.object.domain,res.object.token,obj);
				  }
			  }
			}
		  })
		}
	},
	//上传到七牛
	up.imageUploadQiniu = function(filePath,domain,token,obj){
	  var that = this,
	  dataType = filePath.split('.')[filePath.split('.').length-1],//获取后缀名
	  key = new Date().getTime() + '.' + dataType;//上传的名称
	  wx.uploadFile({
	    url:'开发者服务器地址',
	    filePath:filePath,
	    name: 'file',
	    formData:{
	      token:token,
	      key:key
	    },
	    success: function (res) {
			if(res.errMsg == "uploadFile:ok"){
				setTimeout(function(){
					wx.hideLoading();
				},500)
				//返回上传成功信息
				obj.success({
				  domain:domain,
				  key:key,
				  type:obj.chooseType
				})
			}
	    }
	  });
	}
}
//创建一个实例
var upload = new uploadInit();
const uploadImg = function (obj) {
  upload.chooseUpload(obj);
};

module.exports = {
  chooseUpload: uploadImg
};


4.js中需要用到七牛云请求地址和开发者服务器地址,需要自己配置,有地址替换掉就行。对了App.post是我自己封装请求接口用的,你用什么样的请求接口模版就自己替换掉就行,具体请求接口的封装就不写了,加油干巴铁!

5.然后在需要使用上传的js页面引入使用:

<!-- 
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值