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


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 11 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
javascript获取flash版本号的方法
Nov 20 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
JavaScript两个变量交换值的实现方法
Mar 01 Javascript
AngularJS中$http使用的简单介绍
Mar 17 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
详解Element-UI中上传的文件前端处理
Aug 07 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 5.4 你必须要知道的
2013/08/07 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
js Calender控件使用详解
2015/01/05 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
Javascript中的数据类型之旅
2015/10/18 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
vue2单元测试环境搭建
2018/05/24 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
python版简单工厂模式
2017/10/16 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
python中调试或排错的五种方法示例
2019/09/12 Python
Python字符串三种格式化输出
2020/09/17 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
c/c++某大公司的两道笔试题
2014/02/02 面试题
销售经理工作职责
2014/02/03 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
2015年度女工工作总结
2015/10/22 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
2019财务毕业实习报告
2019/06/27 职场文书