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

export default class Upload{
	constructor(object) {
		this.obj = {
			count:1,
			sizeType:[‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图,默认二者都有
			sourceType:[‘album‘,‘camera‘],   // 可以指定来源是相册还是相机,默认二者都有
		}
		if(Object.prototype.toString.call(object) === "[object Object]"){
			Object.assign(this.obj, object);
		}else{
			uni.showToast({
			    title: ‘参数必须为对象‘,
			    icon:"icon",
			    duration: 2000
			});
		}

		return this;
    }
    // 上传图片 返回一个图片的数组集合
    async uploadPic(){
	    let chooseImageResult = await this.chooseImage()
	    console.log("选择图片",chooseImageResult)

	    let imgArr = await chooseImageResult.tempFilePaths.map(async (item,index) => {
			uni.showLoading({
			    title: `正在上传第${index+1}张`
			});
	    	let uploadFileResult = await this.uploadFile(item)

	    	console.log("上传图片过程",uploadFileResult)
	    	return getApp().globalData.img_prefix + uploadFileResult.data.file.url;
	    })

	    return new Promise((resolve,reject) => {
		    Promise.all(imgArr).then((result)=>{

	  			uni.hideLoading();
				uni.showToast({
				    title: ‘上传成功‘,
				    icon:"none",
				    duration: 2000
				});
				console.log("上传图片结果",result)
				resolve(result)
	       	})
	    })
    }
    uploadFile(file){
    	return new Promise((resolve, reject) => {
	        uni.uploadFile({
	          url: ‘https://baidu.com/upload/‘, //此处是你自己上传接口
	          filePath: file,
	          name: ‘file‘,
	          success: function (res) {
	            var data = res.data;
	            resolve(JSON.parse(data))

	          },
	          fail: function (res) {
	            reject("上传失败")

	          },
	          complete: function (res) {
	            uni.hideToast();
	          }
	        })
	    })
    }
    chooseImage(){
    	return new Promise((resolve,reject) => {
    		uni.chooseImage({
			    count: this.obj.count,//1, // 默认9
			    sizeType: this.obj.sizeType,//[‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图,默认二者都有
			    sourceType: this.obj.sourceType,//[‘album‘,‘camera‘], // 可以指定来源是相册还是相机,默认二者都有
			    success: function (res) {
			    	// console.log(res)
			    	resolve(res)
			    },
			    fail:function(){
			    	reject("选择文件失败")
			    }
		    })
    	})
    }
}

 

//使用方式
let object = {
    count:1,
    sizeType:[‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图,默认二者都有
    sourceType:[‘album‘,‘camera‘],   // 可以指定来源是相册还是相机,默认二者都有
}
let result = await new Upload(object).uploadPic();

  

原文地址:https://www.cnblogs.com/LLX8/p/12106106.html

时间: 2024-11-09 17:21:03

小程序封装多张图片上传api的相关文章

小程序短视频项目———上传短视频业务

一.用户选择视频 1.微信选中视频接口 wx.chooseVideo(Object object) 拍摄视频或从手机相册中选视频. 参数 Object object 属性 类型 默认值 是否必填 说明 支持版本 sourceType Array.<string> ['album', 'camera'] 否 视频选择的来源   compressed boolean true 否 是否压缩所选择的视频文件 >= 1.6.0 maxDuration number 60 否 拍摄视频最长拍摄时间

小程序上传图片,排队上传

//没有处理的wxml,但是有效果,可以简单试验一下 <view class='minbox1'> <text class='red wzgs'>*</text> <text class='wzgs'>照片(点击下面方框上传)</text> <text class='mis'>{{z}}/9</text> </view> <view class='left' wx:if="{{pics}}&qu

微信小程序裁剪图片后上传

上传图片的时候调起裁剪页面,裁剪后再回调完成上传; 图片裁剪直接用we-cropper   https://github.com/we-plugin/we-cropper we-cropper使用详细方法参考博文  https://we-plugin.github.io/we-cropper/#/ chooseImage: function(e){ var _this = this; wx.chooseImage({ count: 1, sizeType: ['original', 'compr

微信小程序压缩图片并上传到服务器(拿去即用)

这里注意一下,图片压缩后的宽度是画布宽度的一半 canvasToTempFilePath 创建画布的时候会有一定的时间延迟容易失败,这里加setTimeout来缓冲一下 这是单张图片压缩,多张的压缩暂时还没有成功,保存到服务器上后是空白的,如有大神望指点一二(>人<:) <canvas canvas-id='photo_canvas' style='width:1000rpx;height:{{canvas_h}}px' class='myCanvas'></canvas&g

微信小程序多张图片上传

微信小程序上传图片每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办? 首先,我们来看一看wx.chooseImage(object)和wx.uploadFile(OBJECT)这两个个api 示例代码是这样的: wx.chooseImage({ success: function(res) { var tempFilePaths = res.tempFilePaths wx.uploadFile({ url: 'http://example.weixin.qq.com/upload',

微信小程序实现多张图片同时上传的方法

对于微信小程序上传图片其实很麻烦的,每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办?这里使用递归,当上传完一张图片后重新执行这个函数,直到所有的图片都上传完成后,就不再调用该函数了.具体的实现方法来为大家分享一下.示例代码如下: wx.chooseImage({success: function(res) {var tempFilePaths = res.tempFilePathswx.uploadFile({url: 'http://example.weixin.qq.com/up

HTML5关于上传API的一些使用(上)

HTML5提供了很多有用的API,其中就包括上传的API,XMLHttpRequest2.0,在HTML5时代之前,需要进行二进制的上传一般都会才用flash的方案,但是当XMLHttpRequest2.0出来之后,完全可以使用HTML5的上传解决方案,能够非常方便的进行二进制上传进度的显示,上传图片的本地预览,甚至可以做到断点续传,分片上传,多文件上传等各种复杂的底层功能. 首先回顾一下XMLHttpRequest1.0的传输过程 关于XMLHttpRequest 初始化XMLHttpRequ

微信小程序开发—快速掌握组件及API的方法---转载

微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支付等功能. 组件 官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/ 对于开发文档,个人建议先了解其整体框架,了解其提供了哪些组件,再联想到这些组件会用在哪些产品的哪些功能.对于接口也是一样,整体了解,而不需要细看. 熟悉了文档的结构,

腾讯云cos对象存储服务文件上传api就是一个大坑

一.介绍 对象存储服务(Cloud Object Service)是基于腾讯多年海量服务经验,对外提供的可靠.安全.易用的海量存储服务.提供多样化接入方式,以及全国部署的上传加速集群,可以无缝衔接CDN进行加速下载. 二.cos 文件上传api源码 /** * 单个文件上传,适用于小文件 * * @param bucketName * bucket名称 * @param remotePath * 远程文件路径 * @param localPath * 本地文件路径 * @return 服务器端返