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


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中的事件处理
Jan 16 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 Javascript
JS实现批量上传文件并显示进度功能
Jun 27 Javascript
vue一步步实现alert功能
Jul 05 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 Javascript
jquery实现抽奖功能
Oct 22 jQuery
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
什么情况下可以不写PHP的闭合标签“?>”
2014/08/28 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
Python 深入理解yield
2008/09/06 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
Python函数返回不定数量的值方法
2019/01/22 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
高中毕业自我鉴定
2013/12/22 职场文书
擅自离岗检讨书
2014/02/11 职场文书
毕业生就业协议书
2014/04/11 职场文书
小学三年级学生评语
2014/04/22 职场文书
经管应届生求职信范文
2014/05/18 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
大学生求职自荐信
2015/03/24 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android
Java版 简易五子棋小游戏
2022/05/04 Java/Android
Mysql中常用的join连接方式
2022/05/11 MySQL