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


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 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
Feb 06 Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 Javascript
Javascript中数组方法汇总(推荐)
Apr 01 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 Javascript
解决vue跨域axios异步通信问题
Apr 17 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
vue实现记事本功能
Jun 26 Javascript
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 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
PHP 简单日历实现代码
2009/10/28 PHP
yii添删改查实例
2015/11/16 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
jQuery 树形结构的选择器
2010/02/15 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
2018/06/02 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
vue实现微信分享功能
2018/11/28 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
Python兔子毒药问题实例分析
2015/03/05 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
升职自荐信
2013/11/28 职场文书
物业工作计划书
2014/01/10 职场文书
销售顾问岗位职责
2014/02/25 职场文书
企业宣传方案
2014/03/04 职场文书
个人催款函范文
2015/06/23 职场文书