相关学习推荐：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-27lane封装 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 = {// 上传图片的APIupload_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 {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插件的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3032499.html
