微信小程序 上传图片到七牛云 支持多张

本文介绍了如何在微信小程序中实现图片上传至七牛云的服务,包括封装的qiniuUploader.js和publishashx.js两个关键组件的详细代码实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里插入图片描述

封装七牛云上传方法 qiniuUploader.js

(function () {
   
   

  var config = {
   
   
    qiniuRegion: '',
    qiniuImageURLPrefix: '',
    qiniuUploadToken: '',
    qiniuUploadTokenURL: '',
    qiniuUploadTokenFunction: null,
    qiniuShouldUseQiniuFileName: false
  }

  module.exports = {
   
   
    init: init,
    upload: upload,
  }

  // 在整个程序生命周期中,只需要 init 一次即可
  // 如果需要变更参数,再调用 init 即可
  function init(options) {
   
   
    config = {
   
   
      qiniuRegion: '',
      qiniuImageURLPrefix: '',
      qiniuUploadToken: '',
      qiniuUploadTokenURL: '',
      qiniuUploadTokenFunction: null,
      qiniuShouldUseQiniuFileName: false
    };
    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.qiniuImageURLPrefix = options.domain;
    }
    config.qiniuShouldUseQiniuFileName = options.shouldUseQiniuFileName
  }

  function upload(filePath, success, fail, options, progress, cancelTask) {
   
   
    

    if (null == filePath) {
   
   
      console.error('qiniu uploader need filePath to upload');
      return;
    }
    if (options) {
   
   
      
      updateConfigWithOptions(options);
    }
    if (config.qiniuUploadToken) {
   
   
     
      doUpload(filePath, success, fail, options, progress, cancelTask);
    } else if (config.qiniuUploadTokenURL) {
   
   
     
      getQiniuToken(function () {
   
   
        doUpload(filePath, success, fail, options, progress, cancelTask);
      });
    } else if (config.qiniuUploadTokenFunction) {
   
   
      
      config.qiniuUploadToken = config.qiniuUploadTokenFunction();
      if (null == config.qiniuUploadToken && config.qiniuUploadToken.length > 0) {
   
   
        console.error('qiniu UploadTokenFunction result is null, please check the return value');
        return
      }
       
      doUpload(filePath, success, fail, options, progress, cancelTask);
    } else {
   
   
      console.error('qiniu uploader need one of [uptoken, uptokenURL, uptokenFunc]');
      return;
    }
  }

  function doUpload(filePath, success, fail, options, progress, cancelTask) {
   
   
    if (null == config.qiniuUploadToken && config.qiniuUploadToken.length > 0) {
   
   
      console.error('qiniu UploadToken is null, please check the init config or networking');
      return
    }

    var url = uploadURLFromRegionCode(config.qiniuRegion);
    
    var fileName = filePath.split('//')[1];
    if (options && options.key) {
   
   
      fileName = options.key;
    }
    var formData = {
   
   
      'token': config.qiniuUploadToken
    
微信小程序上传文件到七牛云需要借助七牛云提供的客户端库,并通过WXML、WXSS和JavaScript编写相应的API调用代码。以下是一个简化的步骤: 1. **注册并配置七牛云账号**:首先,在七牛云官网注册账号,创建一个新的空间存储文件,并获取Access Key和Secret Key。 2. **安装七牛云SDK**:在微信小程序项目中,通过`npm install qiniu-js-sdk`命令安装Qiniu.js SDK库。 3. **引入依赖**:在项目的app.json中,添加对七牛云SDK的引用: ```json "dependencies": { "qiniu-js-sdk": "^7.6.4" } ``` 4. **初始化Qiniu client**:在你需要上传文件的地方,初始化一个Qiniu实例: ```javascript const Qiniu = require('qiniu-js-sdk'); const bucketName = 'your-bucket-name'; const uploadToken = getUploadToken(bucketName); // 获取用于上传的token let qiniuClient = new Qiniu.uploader({ bucket: bucketName, token: uploadToken, }); ``` 5. **上传文件**:使用`uploadFile`方法,提供本地文件路径以及回调函数处理上传结果: ```javascript wx.chooseFile({ count: 1, // 可选,选择文件的数量上限 sizeType: ['base64', 'temp'], // 可选,返回值的文件类型,默认为'temp' success: function(res) { let file = res.tempFilePath; // 或者 res.base64,取决于sizeType的选择 qiniuClient.uploadFile(file, 'filename.ext', {}, (err, info) => { if (err) { console.error(err); } else { console.log('上传成功,key:', info.key); // 接收上传后的url,例如:http://yourbucketname.qiniudn.com/filename.ext } }); } }); function getUploadToken(bucketName) { // 这里通常会从服务器获取,因为一般不会直接暴露secretKey // 使用你的Access Key和Secret Key构造鉴权信息 const auth = new Qiniu.Auth('your-access-key', 'your-secret-key'); return auth.uploadToken(bucketName); } ``` 6. **错误处理**:别忘了处理可能出现的各种错误情况,比如网络问题、权限不足等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值