10月16, 2017

七牛云操作的笔记

记录一下七牛云上传图片的一些操作。

抓取网络图片并保存到bucket

前置工作:

  • 找到Access Key与 Secret Key

alt

alt

  • 新建一个bucket

alt

alt

方式一:

const qiniu = require('qiniu');

const qinuiConfig = {
    "AK": "你的七牛  Access Key配置",
    "SK": "你的七牛 Secret Key配置",
    "bucket": "你的bucket名称",
    "qiniuURL": "oxw62w8wg.bkt.clouddn.com"
}

const mac = new qiniu.auth.digest.Mac(qinuiConfig.AK, qinuiConfig.SK);
const config = new qiniu.conf.Config();
const bucketManager = new qiniu.rs.BucketManager(mac, config);

const resUrl = 'http://devtools.qiniu.com/qiniu.png';
const key = "qiniu.png";

bucketManager.fetch(resUrl, qinuiConfig.bucket, key, function(err, respBody, respInfo) {
    if (err) {
        console.log(err);
        //throw err;
    } else {
        if (respInfo.statusCode == 200) {
            console.log(respBody.key);
            console.log(respBody.hash);
            console.log(respBody.fsize);
            console.log(respBody.mimeType);
        } else {
            console.log(respInfo.statusCode);
            console.log(respBody);
        }
    }
});

方式二:

// 用 qshell,使用前需要全局安装
// npm i qshell -g
// 然后配置账号
// qshell account <你的AK> <你的SK>
const { exec } = require("shelljs");

const resUrl = 'http://devtools.qiniu.com/qiniu.png';
const bucket = "mytest";
const key = "qiniu.png";

let bash = `qshell fetch ${resUrl} ${bucket} '${key}'`

// let child = exec(bash, { async: true })
// child.stdout.on('data', data => {
//   resolve(data)
// })

exec(bash, (code, stdout, stderr) => {
    if (stderr) return reject(stderr)
    if (stdout === 'Fetch error, 504 , xreqid:') return reject(stdout)

    //resolve(stdout)
})

在实际中,我们可以将key设置为'name + 随机的token'的形式。(注:随机token可以使用random-token

域名映射

如何配置域名的 CNAME

这篇指南说的差不多,不过绑定域名需要你先往里面充不少于10元的金额。

然后绑定之后,需要等待一些时间,才会出来CNAME:

alt

随后绑定域名解析即可:

alt

测试如下:

alt

图片基本处理

这个还是可以学习一下的,即在URL后面跟参数。

图片基本处理

imageView2/<mode>/w/<LongEdge>
                 /h/<ShortEdge>
                 /format/<Format>
                 /interlace/<Interlace>
                 /q/<Quality>
                 /ignore-error/<ignoreError>

简单的图片上传功能

const qiniu = require('qiniu');

const qinuiConfig = {
    "AK": "q4aciPVBH1YjvsHepDQ1jdQHxseEbA3UF3Yss0Oo",
    "SK": "b7M1_dhrYHNOlbTw69HeDxIyeqxFtoYuR4GUHtwx",
    "bucket": "mytest",
    "qiniuURL": "oxw62w8wg.bkt.clouddn.com"
}

const mac = new qiniu.auth.digest.Mac(qinuiConfig.AK, qinuiConfig.SK);

const options = {
    scope: qinuiConfig.bucket,
};
const putPolicy = new qiniu.rs.PutPolicy(options);
const uploadToken=putPolicy.uploadToken(mac);

const config = new qiniu.conf.Config();
// 空间对应的机房
config.zone = qiniu.zone.Zone_z0;

const localFile = "/Users/zhangpu/Documents/test.jpg";
const formUploader = new qiniu.form_up.FormUploader(config);
const putExtra = new qiniu.form_up.PutExtra();
const key='test.jpg';
// 文件上传
formUploader.putFile(uploadToken, key, localFile, putExtra, function(respErr, respBody, respInfo) {
    if (respErr) {
        throw respErr;
    }
    if (respInfo.statusCode == 200) {
        console.log(respBody);
    } else {
        console.log(respInfo.statusCode);
        console.log(respBody);
    }
});

分片上传文件的lib库

使用qiniu-web-uploader

简单调用如下:

class App extends Component {
  async onChange(ev) {
    const file = ev.target.files[0];
    var key = "test789.jpg";

    const uptoken = {
      uptoken: 'q4aciPVBH1YjvsHepDQ1jdQHxseEbA3UF3Yss0Oo:LmokuV5zsruO3azakifXVDoRFzA=:eyJzY29wZSI6Im15dGVzdCIsImRlYWRsaW5lIjoxNTA4MTQwNzc2fQ==', //七牛上传凭证
      key: 'dGVzdDc4OS5qcGc=' //base64字符串,new Buffer(key).toString('base64')
    }

    let uploader = new Uploader(file, uptoken);

    uploader.on('progress', () => {
      console.log(uploader.percent); //加载进度
      console.log(uploader.offset); //字节
      console.log(uploader.file); //文件
    });
    uploader.on('cancel', () => {
      //取消
    });
    uploader.on('complete', () => {
      console.log(uploader.imgRes); //文件
    });

    let imgRes = await uploader.upload(); //返回七牛返回的Key
    uploader.cancel(); //取消
  }
  render() {
    return (
      <div className="App">
        <input type="file" onChange={this.onChange} />
      </div>
    );
  }
}

这里的uploadToken可以参考上面的代码,我是通过node来生成的。包括下面的key也是通过node生成:

alt

注:key也可以通过下面的方式来生成

Buffer.from(key).toString('base64')

本文链接:www.my-fe.pub/post/about-qiniu-note.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。