小程序七牛云文件上传封装js_七牛云 js sdk上传到指定文件夹

之前每个页面都是零零散散的，没有统一，这次全部封装到一个js里
qiniuUploader.js:

(function () { const util = require(\'./index\') const { request } = require(\'./request\') const app = getApp() let platform = wx.getDeviceInfo().platform // 登录平台 // 请参考demo的index.js中的initQiniu()方法，若在使用处对options进行了赋值，则此处config不需要赋默认值。init(options) 即updateConfigWithOptions(options)，会对config进行赋值 let config = { // bucket 所在区域。ECN, SCN, NCN, NA, ASG，分别对应七牛云的：华东，华南，华北，北美，新加坡 5 个区域 qiniuRegion: \'\', // 七牛云bucket 外链前缀，外链在下载资源时用到 qiniuBucketURLPrefix: \'\', // 获取uptoken方法三选一即可，执行优先级为：uptoken > uptokenURL > uptokenFunc。三选一，剩下两个置空。推荐使用uptokenURL，详情请见 README.md // 由其他程序生成七牛云uptoken，然后直接写入uptoken qiniuUploadToken: \'\', // 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {\"uptoken\": \"0MLvWPnyy...\"} qiniuUploadTokenURL: \'\', // uptokenFunc 这个属性的值可以是一个用来生成uptoken的函数，详情请见 README.md qiniuUploadTokenFunction: function () {}, // qiniuShouldUseQiniuFileName 如果是 true，则文件的 key 由 qiniu 服务器分配（全局去重）。如果是 false，则文件的 key 使用微信自动生成的 filename。出于初代sdk用户升级后兼容问题的考虑，默认是 false。 // 微信自动生成的 filename较长，导致fileURL较长。推荐使用{qiniuShouldUseQiniuFileName: true} + \"通过fileURL下载文件时，自定义下载名\" 的组合方式。 // 自定义上传key 需要两个条件：1. 此处shouldUseQiniuFileName值为false。 2. 通过修改qiniuUploader.upload方法传入的options参数，可以进行自定义key。（请不要直接在sdk中修改options参数，修改方法请见demo的index.js） // 通过fileURL下载文件时，自定义下载名，请参考：七牛云“对象存储 > 产品手册 > 下载资源 > 下载设置 > 自定义资源下载名”（https://developer.qiniu.com/kodo/manual/1659/download-setting）。本sdk在README.md的\"常见问题\"板块中，有\"通过fileURL下载文件时，自定义下载名\"使用样例。 qiniuShouldUseQiniuFileName: false } // 初始化 function initQiniu(uptoken) { var options = { region: \'ECN\', // bucket所在区域，ECN, SCN, NCN, NA, ASG 对应：华东，华南，华北，北美，新加坡 默认ECN uptoken: uptoken, //从指定 url 通过 HTTP GET 获取 uptoken 以下三选一 // uptokenURL: \'\',//这个每次上传都会请求 // uptokenFunc: function () {}, // uptokenFunc 这个属性的值可以是一个用来生成uptoken的函数， domain: app.globalData.qiniuUrl, // bucket 外链域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 fileURL 字段。否则需要自己拼接 // qiniuShouldUseQiniuFileName 如果是 true，则文件的 key 由 qiniu 服务器分配（全局去重）。如果是 false，则文件的 key 使用微信自动生成的 filename。出于初代sdk用户升级后兼容问题的考虑，默认是 false。 // 微信自动生成的 filename较长，导致fileURL较长。推荐使用{qiniuShouldUseQiniuFileName: true} + \"通过fileURL下载文件时，自定义下载名\" 的组合方式。 // 自定义上传key 需要两个条件：1. 此处shouldUseQiniuFileName值为false。 2. 通过修改qiniuUploader.upload方法传入的options参数，可以进行自定义key。（请不要直接在sdk中修改options参数，修改方法请见demo的index.js） // 通过fileURL下载文件时，自定义下载名，请参考：七牛云“对象存储 > 产品手册 > 下载资源 > 下载设置 > 自定义资源下载名”（https://developer.qiniu.com/kodo/manual/1659/download-setting）。本sdk在README.md的\"常见问题\"板块中，有\"通过fileURL下载文件时，自定义下载名\"使用样例。 // shouldUseQiniuFileName: false }; // 将七牛云相关配置初始化进本sdk init(options); } // init(options) 将七牛云相关配置初始化进本sdk // 在整个程序生命周期中，只需要 init(options); 一次即可 // 如果需要变更七牛云配置，再次调用 init(options); 即可 function init(options) { updateConfigWithOptions(options); } // 更新七牛云配置 function updateConfigWithOptions(options) { if (options.region) { config.qiniuRegion = options.region; } else { console.error(\'qiniu uploader need your bucket region\'); } if (options.uptoken) { config.qiniuUploadToken = options.uptoken; } else if (options.uptokenURL) { config.qiniuUploadTokenURL = options.uptokenURL; } else if (options.uptokenFunc) { config.qiniuUploadTokenFunction = options.uptokenFunc; } if (options.domain) { config.qiniuBucketURLPrefix = options.domain; } config.qiniuShouldUseQiniuFileName = options.shouldUseQiniuFileName } function uploadFile(filePath, success, fail, options, progress, cancelTask) { let successResult = [] let failResult = [] const result = filePath.reduce((accumulatorPromise, next) => { return accumulatorPromise.then(() => { // 上一个接口执行完毕再执行下一个 return uploadItem(next.tempFilePath, options, progress, cancelTask).then((res => { successResult = successResult.concat(res) })).catch(res => { failResult = failResult.concat(res) }) }) }, Promise.resolve()) result.then(e => { if (failResult.length === 0) success(successResult) else fail(successResult) }) } // 正式上传的前置方法，做预处理，应用七牛云配置 function uploadItem(filePath, options, progress, cancelTask) { return new Promise((resolve, reject) => { if (null == filePath) { util.toastModel(\'qiniu uploader need filePath to upload\') reject(); } if (options) { updateConfigWithOptions(options); } if (config.qiniuUploadToken) { doUpload(filePath, options, progress, cancelTask).then(res => { resolve(res) }).catch(res => { util.toastModel(res) reject() }) } else if (config.qiniuUploadTokenURL) { getQiniuToken(function () { doUpload(filePath, options, progress, cancelTask).then(res => { resolve(res) }).catch(res => { util.toastModel(res) reject() }) }); } else if (config.qiniuUploadTokenFunction) { config.qiniuUploadToken = config.qiniuUploadTokenFunction(); if (null == config.qiniuUploadToken && config.qiniuUploadToken.length > 0) { util.toastModel(\'qiniu UploadTokenFunction result is null, please check the return value\') reject(); } doUpload(filePath, options, progress, cancelTask).then(res => { resolve(res) }).catch(res => { util.toastModel(res) reject() }) } else { util.toastModel(\'qiniu uploader need one of [uptoken, uptokenURL, uptokenFunc]\') reject(); } }) } // 正式上传 function doUpload(filePath, options, progress, cancelTask) { return new Promise((resolve, reject) => { if (null == config.qiniuUploadToken && config.qiniuUploadToken.length > 0) { util.toastModel(\'qiniu UploadToken is null, please check the init config or networking\') reject(); return } var url = uploadURLFromRegionCode(config.qiniuRegion); var fileName = filePath.split(\'//\')[1]; // 自定义上传key（即自定义上传文件名）。通过修改qiniuUploader.upload方法传入的options参数，可以进行自定义文件名称。如果options非空，则使用options中的key作为fileName if (options && options.key) { fileName = options.key; } var formData = { \'token\': config.qiniuUploadToken }; // qiniuShouldUseQiniuFileName 如果是 true，则文件的 key 由 qiniu 服务器分配（全局去重）。如果是 false，则文件的 key 使用微信自动生成的 filename。出于初代sdk用户升级后兼容问题的考虑，默认是 false。 if (!config.qiniuShouldUseQiniuFileName) { // , \'devtools\' if ([\'windows\', \'mac\'].includes(platform)) { formData[\'key\'] = util.formatTime(new Date(), \'date\').split(\'-\').join(\'/\').split(\' \')[0] + \'/\' + fileName } else { formData[\'key\'] = util.formatTime(new Date(), \'date\').split(\'-\').join(\'/\').split(\' \')[0] + \'/\' + new Date().getTime() + \'/\' + fileName } } var uploadTask = wx.uploadFile({ url: url, filePath: filePath, name: \'file\', formData: formData, success: (res) => { var dataString = res.data try { var dataObject = JSON.parse(dataString); if (util.isArray(dataObject.data)) {  resolve(dataObject.data); } else {  util.toastModel(dataObject.data.status || \'上传失败请重新上传\')  reject(); } } catch (e) { util.toastModel(e) reject(); } }, fail: function (error) { if (fail) { util.toastModel(error) reject(); } } }) // 文件上传进度 uploadTask.onProgressUpdate((res) => { progress && progress(res) }) // 中断文件上传 cancelTask && cancelTask(() => { uploadTask.abort() }) }) } // 获取七牛云uptoken, url为后端服务器获取七牛云uptoken接口 function getQiniuToken(callback) { wx.request({ url: config.qiniuUploadTokenURL, // timeout: 6000000, success: function (res) { var token = res.data.uptoken; if (token && token.length > 0) { config.qiniuUploadToken = token; if (callback) { callback(); } } else { console.error(\'qiniuUploader cannot get your token, please check the uptokenURL or server\') } }, fail: function (error) { console.error(\'qiniu UploadToken is null, please check the init config or networking: \' + error); } }) } // 选择七牛云文件上传接口，文件向匹配的接口中传输。ECN, SCN, NCN, NA, ASG，分别对应七牛云的：华东，华南，华北，北美，新加坡 5 个区域 function uploadURLFromRegionCode(code) { var uploadURL = null; switch (code) { case \'ECN\': uploadURL = \'https://up.qiniup.com\'; break; case \'NCN\': uploadURL = \'https://up-z1.qiniup.com\'; break; case \'SCN\': uploadURL = \'https://up-z2.qiniup.com\'; break; case \'NA\': uploadURL = \'https://up-na0.qiniup.com\'; break; case \'ASG\': uploadURL = \'https://up-as0.qiniup.com\'; break; default: console.error(\'please make the region is with one of [ECN, SCN, NCN, NA, ASG]\'); } return uploadURL; } // 获取七牛云token function getQiniuToken() { return new Promise((resolve, reject) => { const data = { url: \'admin/qn/get_token\', method: \'GET\' } request(data, true, false, \'操作中...\', 2000) .then((res) => { if (res.uptoken) { resolve(res.uptoken) } else { reject(\'七牛云token获取失败\') } }) .catch((err) => { reject(\'七牛云token获取失败\' + err) }) }) } module.exports = { initQiniu, init, uploadFile, getQiniuToken }})();

使用：
index.js:

const { initQiniu, uploadFile, getQiniuToken} = require(\'../../utils/qiniuUploader\')Component({ data: { image:\'\' }, methods:{ async onUpload() { let qiniuToken = \'\' try { qiniuToken = await getQiniuToken() } catch (err) { wx.hideLoading() console.log(\'文件上传失败\',err) return } initQiniu(qiniuToken) uploadFile(this.data.image, (res) => { console.log(\'成功\', res) this.onSubmit() }, (err) => { console.log(\'失败\', err) }) }, onSubmit(){ console.log(\'好啦\') }, uploadImg() { wx.chooseMedia({ count: 9, mediaType: [\'image\',\'video\'], sourceType: [\'album\', \'camera\'], maxDuration: 30, camera: \'back\', success:(res)=> { console.log(res.tempFiles) this.setData({ image:res.tempFiles }) } }) } }})

index.wxml:

<button bind:tap=\"uploadImg\">上传</button><image wx:for=\"{{image}}\" src=\"{{item.tempFilePath}}\" mode=\"\" /><button bind:tap=\"onUpload\">提交</button>