微信小程序批量上传图片到七牛(推荐)


Posted in Javascript onDecember 19, 2019

一、引入七牛SDK

具体查看文档

https://github.com/gpake/qiniu-wxapp-sdk/blob/master/README.md

二、封装上传方法upload.js

/**
 * 上传函数
 */
const qiniuUploader = require("qiniuUploader");
const request = require("./request.js")
 
// 初始化七牛相关参数
function initQiniu() {
  var options = {
    uploadURL: 'https://up.qiniup.com',
    region: 'ECN', //
    uptokenURL: request.URL + 'qiniu-token?token=' + getApp().globalData.token,
    // uptoken: 'xxxx',
    domain: 'cdn-mpsoft.tujihome.com/',
  };
  qiniuUploader.init(options);
}
 
function upload(filePath, success, fail) {
  initQiniu();
  // 交给七牛上传
  qiniuUploader.upload(filePath, (res) => {
    success(res);
  }, (error) => {
    console.error('error: ' + JSON.stringify(error));
    fail(error);
  });
}
 
 
/**
 * 批量上传
 * @param images
 */
function batchUpload(images) {
  let uplist = []
  for (let index in images) {
    const path = images[index]['url'];
    const key = images[index]['key'];
    let promise = new Promise((resolve, reject) => {
      qiniuUploader.upload(path, (res) => {
        resolve(res.imageURL)
      }, (error) => {
        reject(error)
      },{
        uploadURL: 'https://up.qiniup.com',
        region: 'ECN', //
        uptokenURL: request.URL + 'qiniu-token?token=' + getApp().globalData.token,
        key: key,
        domain: 'cdn-mpsoft.tujihome.com/',
      });
    })
    uplist.push(promise)
  }
  Promise.all(uplist).then((resultList) => {
    console.log(resultList);
    return resultList;
  }, error => {
    console.log(error)
    throw err;
  })
}
 
module.exports = {
  'upload': upload,
  'BatchUpload' : batchUpload,
}

url:文件路径,key:文件名

batchUpload()传入数组,包含文件路径跟文件名,不需要自定义文件名可以修改下,只调用一次初始化方法,

返回值为包含所有文件路径的数组

三、调用

uploadImage(images) {
    var that = this
    var imageURL = [];
    for (var i of images) {
      i.key = 'gclw_' + Date.parse(new Date()) + Math.random() + '.jpg';
    }
 
    try {
      imageURL = upload.BatchUpload(images);
      return imageURL;
    } catch (e) {
      wx.showModal({
        title: '提示',
        content: e,
        showCancel: false,
      })
    }
  },

结果

微信小程序批量上传图片到七牛(推荐)

总结

以上所述是小编给大家介绍的微信小程序批量上传图片到七牛,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript AOP 实现ajax回调函数使用比较方便
Nov 20 Javascript
页面只能打开一次Cooike如何实现
Dec 04 Javascript
jQuery 关于伪类选择符的使用说明
Apr 24 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
javascript删除html标签函数cIsHTML
Jan 09 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
详解angular中的作用域及继承
May 31 Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
bootstrap模态框关闭后清除模态框的数据方法
Aug 10 Javascript
echarts实现折线图的拖拽效果
Dec 19 #Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 #Javascript
Echarts实现单条折线可拖拽效果
Dec 19 #Javascript
Webpack设置环境变量的一些误区详解
Dec 19 #Javascript
Echarts实现多条折线可拖拽效果
Dec 19 #Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 #Javascript
利用JS如何获取form表单数据
Dec 19 #Javascript
You might like
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
php异常处理方法实例汇总
2015/06/24 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
JS中style属性
2006/10/11 Javascript
动态为事件添加js代码示例
2009/02/15 Javascript
js AspxButton的客户端操作
2009/06/26 Javascript
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
微信小程序如何实现在线客服功能
2019/10/16 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
[01:04:08]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第一场 12.16
2020/12/18 DOTA
详解在Python中处理异常的教程
2015/05/24 Python
python3中str(字符串)的使用教程
2017/03/23 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
快速创建python 虚拟环境
2020/11/28 Python
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
报告会主持词
2014/04/02 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
岗位工作说明书
2014/07/29 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
客户答谢会致辞
2015/01/20 职场文书