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


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 相关文章推荐
js动态加载以及确定加载完成的代码
Jul 31 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
js 开发之autocomplete="off"在chrom中失效的解决办法
Sep 28 Javascript
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
Aug 23 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
Apr 22 Javascript
基于vue--key值的特殊用处详解
Jul 31 Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 Javascript
Vue3不支持Filters过滤器的问题
Sep 24 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初学者头痛的十四个问题
2006/07/12 PHP
php常用Stream函数集介绍
2013/06/24 PHP
php后台如何避免用户直接进入方法实例
2013/10/15 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
BOOM vs RR BO5 第二场 2.14
2021/03/10 DOTA
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
Python入门篇之文件
2014/10/20 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
Python Logging 日志记录入门学习
2018/06/02 Python
通过 Django Pagination 实现简单分页功能
2019/11/11 Python
python实现简单的购物程序代码实例
2020/03/03 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
python实现数字炸弹游戏程序
2020/07/17 Python
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
国际花店:Pickup Flowers
2020/04/10 全球购物
初中学生期末评语
2014/04/24 职场文书
关于环保的活动方案
2014/08/25 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
参观邀请函范文
2015/02/02 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏
部分武汉产收音机展览
2022/04/07 无线电