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


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 相关文章推荐
PJ Blog修改-禁止复制的代码和方法
Oct 25 Javascript
JS的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
May 05 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
angular.js分页代码的实例
Jul 27 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
原生js实现照片墙效果
Oct 13 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无敌近乎加密方式!
2010/07/17 PHP
php模拟登陆的实现方法分析
2015/01/09 PHP
php删除指定目录的方法
2015/04/03 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
基于vue展开收起动画的示例代码
2018/07/05 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
建筑班组长岗位职责
2014/01/02 职场文书
一帮一活动总结
2014/05/08 职场文书
五水共治一句话承诺
2014/05/30 职场文书
导游词之上海豫园
2019/10/24 职场文书
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL
js 数组 fill() 填充方法
2021/11/02 Javascript
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers
使用refresh_token实现无感刷新页面
2022/04/26 Javascript
ant design charts 获取后端接口数据展示
2022/05/25 Javascript