当前位置： 首页 > news >正文

小程序七牛云文件上传封装js

news 2025/11/13 12:18:12

之前每个页面都是零零散散的，没有统一，这次全部封装到一个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，然后直接写入uptokenqiniuUploadToken: '',// 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "0MLvWPnyy..."}qiniuUploadTokenURL: '',// uptokenFunc 这个属性的值可以是一个用来生成uptoken的函数，详情请见 README.mdqiniuUploadTokenFunction: 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 对应：华东，华南，华北，北美，新加坡 默认ECNuptoken: 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};// 将七牛云相关配置初始化进本sdkinit(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作为fileNameif (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.datatry {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;}// 获取七牛云tokenfunction 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>
http://www.dtcms.com/a/313947.html

相关文章：

  • 入门MicroPython+ESP32：PC远程控制ESP32 LED灯
  • 百度翻译详解：包括PaddleNLP、百度AI开放平台、接口逆向（包括完整代码）
  • 四、Linux 的实用操作
  • 基于开源AI智能名片链动2+1模式与S2B2C商城小程序的客户关系深化研究
  • 【高等数学】第八章 向量代数与空间解析几何——第一节 向量及其线性运算
  • 菜鸟集团招Java研发啦
  • Kubernetes RBAC 鉴权：构建安全的集群访问控制体系
  • k8s常见问题
  • 力扣热题100——数组
  • 关于Npm和Nvm的用法
  • 华为云产品图解
  • falsk windows 服务器部署-解决服务器外无法访问
  • 零售行业线上线下融合趋势，华为云智能零售解决方案，在门店运营与电商业务中的技术应用与场景实践
  • LLM大模型时代：生活服务领域的“生存革命“与新生态重构
  • [论文阅读] 人工智能 + 教学 | 从代码到职业：用机器学习预测竞赛程序员的就业潜力
  • FLutter 如何在跨平台下实现国际化多语言开发
  • 安全扫描：目标使用过期的TLS1.0 版协议问题
  • Spring AI Alibaba Graph 深度解析：原理、架构与应用实践
  • 尚硅谷2025最新SpringCloud速通-操作步骤（详细）
  • [复习]计算机网络
  • 从原始 Import/Export 到 wasm-bindgen 与自定义 Section
  • Ethereum：拥抱开源，OpenZeppelin 未来的两大基石 Relayers 与 Monitor
  • 嵌入式硬件中三极管推挽电路控制与实现
  • 模型蒸馏(Distillation)：原理、算法、应用
  • 突破Transformer局限！MICN：线性复杂度实现时序预测新高度
  • LeetCode 132：分割回文串 II
  • 作物生长模型Oryza V3实战19：场景模拟常见问题及解决
  • Redis7基数统计(HyperLogLog)深度分析
  • PostGIS面试题及详细答案120道之 （091-100 ）
  • 读懂Node Exporter采集数据的原理