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


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五图轮播切换实用版
Aug 17 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
jquery弹出框的用法示例(2)
Aug 26 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
Oct 29 Javascript
jQuery操作表单常用控件方法小结
Mar 23 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
React数据传递之组件内部通信的方法
Dec 31 Javascript
Vue多种方法实现表头和首列固定的示例代码
Feb 02 Javascript
electron demo项目npm install安装失败的解决方法
Feb 06 Javascript
用vue快速开发app的脚手架工具
Jun 11 Javascript
使用webpack构建应用的方法步骤
Mar 04 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
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
PHP函数microtime()用法与说明
2013/12/04 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
php中session过期时间设置及session回收机制介绍
2014/05/05 PHP
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
2020/05/09 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
python中__slots__用法实例
2015/06/04 Python
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
golang/python实现归并排序实例代码
2020/08/30 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
最经典的大学生职业生涯规划范文
2014/03/05 职场文书
买卖车协议书
2014/04/21 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
会议欢迎词范文
2015/01/27 职场文书
财务经理岗位职责
2015/01/31 职场文书
2016公司新年问候语
2015/11/11 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
实现GO语言对数组切片去重
2022/04/20 Golang
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers