相关学习推荐:javascript“>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实现图片上传JS插件
—–文章转载自PHP中文网如有侵权请联系admin#tyuanma.cn删除
windows怎么查看端口情况?
声明: 本文章由【亿码酷站】整理自网络!如有侵权,请邮件联系 ymkuzhan@126.com 删除。本站发布的文章及附件仅限用于学习和研究目的;不得将上述内容用于商业或非法用途,否则后果请用户自负。
本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件与我们联系处理。
赞助本站仅为维持服务器日常运行并非购买程序及源码费用因此不提供任何技术支持,如需商用请购买正版!
本站资源如无特殊说明解压密码一律为www.ymkuzhan.com
本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件与我们联系处理。
赞助本站仅为维持服务器日常运行并非购买程序及源码费用因此不提供任何技术支持,如需商用请购买正版!
本站资源如无特殊说明解压密码一律为www.ymkuzhan.com