基于uni-app实现图片上传JS插件

ID:3030 / 打印
基于uni-app实现图片上传JS插件
相关学习推荐:javascript(视频)
使用前先new 一下
所有方法均返回 promise 对象 可使用then() 写后续业务 或 使用 async await

预览一下

小程序端

体验一下

H5 地址 http://uni_upload.gek6.com/uploader/#/

服务端返回示例
{	"code":0,	"msg":"上传成功",	"data":"http://www.test.com/uploads/20190227/f2824d2d4dc38f30699f816226b4a578.jpg"}复制代码

直接上源码

/* 	2019-02-27 	lane 	封装 uni-app 图片上传功能 	 	使用前先new 一下 	 	所有方法均返回 promise 对象 可使用then() 写后续业务 或 使用 async await 	 	服务端返回示例 	{		"code":0,		"msg":"上传成功",		"data":"http://www.test.com/uploads/20190227/f2824d2d4dc38f30699f816226b4a578.jpg" 	} 	choose	选择图片 		参数 num 为要选择的图片数量 	upload_one 上传一张图片 		参数 path  选择成功后返回的 缓存文件图片路径 	upload  上传多张图片 		参数 path_arr 选择图片成功后 返回的图片路径数组 	choose_and_upload  选择图片并上传 		参数 num 为要选择的图片数量 		 */  // 引入配置信息或者自己创建个 config 对象 // import config from "../config.js";let config = { 	// 上传图片的API 	upload_img_url:&#39;http://uni_upload.gek6.com/index.php/index/upload&#39;} class Uploader {	constructor() { 		 	} 	choose(num) {		return new Promise((resolve, reject) => { 			uni.chooseImage({ 				count: num, 				success(res) { 					// console.log(res); 					// 缓存文件路径 					resolve(res.tempFilePaths) 				}, 				fail(err) { 					console.log(err) 					reject(err) 				} 			}) 		})  	} 	upload_one(path) {		return new Promise((resolve, reject) => { 			uni.showLoading({ 				title:&#39;上传中&#39; 			}) 			uni.uploadFile({ 				url: config.upload_img_url, //仅为示例,非真实的接口地址 				filePath: path, 				name: &#39;file&#39;, 				success: (uploadFileRes) => {					if("string"===typeof uploadFileRes.data){ 						resolve(JSON.parse(uploadFileRes.data).data) 					}else{ 						resolve( uploadFileRes.data.data ) 					} 					 				},				complete() { 					uni.hideLoading() 				} 			}); 		}) 	} 	upload(path_arr) {		let num = path_arr.length;		return new Promise(async (resolve, reject) => {			let img_urls = []			for (let i = 0; i < num; i++) {				let img_url = await this.upload_one(path_arr[i]); 				console.log(img_url) 				img_urls.push(img_url) 			}; 			console.log("全部上传成功") 			resolve(img_urls) 		})   	} 	choose_and_upload(num) {		return new Promise(async (resolve, reject) => {			let path_arr = await this.choose(num);			let img_urls = await this.upload(path_arr); 			resolve(img_urls); 		})  	} }export default Uploader;复制代码
choose 选择图片
参数 num 为要选择的图片数量 返回 图片缓存路径 数组复制代码
upload_one 上传一张图片
参数 path  选择成功后返回 远程图片路径复制代码
upload 上传多张图片
参数 path_arr 选择图片成功后 返回远程图片路径数组复制代码
choose_and_upload 选择图片并上传
参数 num 为要选择的图片数量 返回 图片缓存路径 数组复制代码

了解更多其他精品文章,敬请关注uni-app栏目~

上一篇: uni-app实现微信端性能翻倍的妙招
下一篇: uni-app在不同平台下拨打电话的示例

作者:admin @ 24资源网   2024-09-06

本站所有软件、源码、文章均有网友提供,如有侵权联系308410122@qq.com

与本文相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。