登录  /  注册
首页 > web前端 > uni-app > 正文

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

coldplay.xixi
发布: 2020-09-28 16:05:20
转载
3154人浏览过
基于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:'http://uni_upload.gek6.com/index.php/index/upload'}
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:'上传中'
			})
			uni.uploadFile({
				url: config.upload_img_url, //仅为示例,非真实的接口地址
				filePath: path,
				name: 'file',
				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实现图片上传JS插件的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:juejin网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
关于CSS思维导图的课件在哪? 课件
凡人来自于2024-04-16 10:10:18
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号