小程序上传图片到七牛,基于Thinkjs的服务端【原创,真正可用】

使用Thinkjs实现小程序图片上传至七牛云教程
本文详细介绍了如何使用Thinkjs服务端配合七牛云SDK,实现在小程序端上传图片的功能。首先获取七牛云的access_key、secret_key及bucket名称和domain,然后在服务端安装七牛SDK并编写获取token的代码。小程序端需要引入qiniuUploader.js,完成js、wxml和wxss的配置。通过实例操作和相关资源链接,帮助开发者实现图片上传。

服务端用的是Thinkjs的,那么如何让小程序可以上传图片到七牛云?
看了网上一些写的,有些问题,所以自己也来写一个,希望能帮助到别人。

准备工作:

从七牛云获取access_key、secret_key,创建bucket取得名字,获取domian


  1. access_key、secret_key
    这里写图片描述
    2、新建bucket
    这里写图片描述
    3、获取domian
    这里写图片描述

如果自己有域名,还可以配置DNS中的CNAME,用一个二级域名来代替这个七牛随机分配的域名,这样更好记些。比如,我是pic.mydomain.com。这部分,七牛有教程,需要的自己在七牛里看。
好了,得到这些后,我们正式开始了。

首先要在服务器端安装七牛SDK,用下面的命令,在命令行工具输入:

npm install qiniu

一、服务端的代码,作用就是取得token

const Base = require('./base.js');
const qiniu = require('qiniu');
module.exports = class extends Base {
    async getQiniuTokenAction() {
        let accessKey = '-2k5AtVgUQkuFYsdferzsdsdfsdfsgh';
        // 你自己的accessKey
        let secretKey = 'bJ5JBgRGPGIEtasdasdasdasfdgewrety';
        // 你自己的secretKey
        let bucket =  'yourbucket';
        // 你创建的七牛存储空间名
        let domain =  'http://icon.example.com/';
        // 你自己的bucket的domain
        let mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
        let deadline = parseInt(new Date().getTime() / 1000) + 600;
        let options = {
            scope:bucket,
            deadline:deadline,
        };
        let putPolicy = new qiniu.rs.PutPolicy(options);
        let uploadToken=putPolicy.uploadToken(mac);
        let data = {
            token:uploadToken,
            domain:domain
        };
        return this.success(data);
    }
};

二、小程序端

首先,先去下载qiniuUploader.js,很重要,有篇博文就说明,要知道没有这个文件,是不可能上传成功的!
下载地址:http://7xvilo.com1.z0.glb.clouddn.com/qiniu-wxapp-sdk-master.zip
对了,下载解压后找到d

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值