<------------------------------------------------------------------------------ 旧版本,新版本优化在底下 ------------------------------------------------------------------------------>
-
项目中需要一次多图上传和视频上传就封装了一个简单通用的js
-
使用很简单复制一下代码粘贴到一个空的js,我命名为chooseUpload,将这个文件放到项目文件夹名称为utils中,没有这个文件夹可以自己新建一个
-
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页面引入使用:
<!--