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


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 相关文章推荐
jQuery UI Autocomplete 体验分享
Feb 14 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
Angular简单验证功能示例
Dec 22 Javascript
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 Javascript
js实现鼠标拖曳效果
Dec 30 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
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语法速查表
2006/12/06 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
ThinkPHP实现事务回滚示例代码
2014/06/23 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
js数组Array sort方法使用深入分析
2013/02/21 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
JavaScript面向对象精要(上部)
2017/09/12 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
pandas string转dataframe的方法
2018/04/11 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
Fnac西班牙官网:法国文化和电子产品零售商
2021/03/14 全球购物
幼儿园门卫岗位职责
2014/02/14 职场文书
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
工作失职检讨书500字
2014/10/17 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
水电工程师岗位职责
2015/02/13 职场文书
毕业生入职感言
2015/07/31 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA