七牛文件上传的前后端部署

后端(Node.js)

后端的作用是为前端提供上传所需要的凭证

准备

注册七牛开发者帐号 登录七牛开发者后台,获取AccessKey 和 Secret Key 创建对象存储的存储空间 地址:https://portal.qiniu.com/user/key

sdk安装

npm install qiniu --save

token生成

let mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
let options = {
    scope: config.Bucket,
    expires: 7200,
    returnBody: '{"key":"$(key)","hash":"$(etag)","fsize":$(fsize),"bucket":"$(bucket)","name":"$(x:name)"}'
};
let putPolicy = new qiniu.rs.PutPolicy(options);
let uploadToken = putPolicy.uploadToken(mac);

scope:存储空间的名称 expires:凭证的有效时间,默认情况下,有效期为1个小时 returnBody:返回的内容,上面代码设置返回的JSON格式的内容 uploadToken即为前端上传所需要的token

前端(vue)

sdk安装

//安装
npm install qiniu-js --save
//引入
var qiniu = require('qiniu-js')
// or
import * as qiniu from 'qiniu-js'

上传代码

<a-upload name="file"
    :action="qiniuUrl"
    :beforeUpload="beforeUpload"
    @change="handleChange" :data="{token:qiniuToken}">
</a-upload>

qiniuUrl:存储空间所在的存储区域 https://developer.qiniu.com/kodo/manual/1671/region-endpointqiniuToken:从后端获取到的token

beforeUpload(file) {
    let that = this
    let putExtra = {
        fname: file.name,
        params: {},
        mimeType: ["image/png", "image/jpeg", "image/gif"]
    };
    let observe = {
        next(res) {},
        error(err) {},
        complete(res) {}
    };
    let config = {
        useCdnDomain: true,
    };
    let observable = qiniu.upload(file, 'pageapi_' + (new Date()).valueOf() + file.name.replace(/.*\./, '.'), this.qiniuToken, putExtra, config)
    observable.subscribe(observe)
},

qiniu.upload(file: blob, key: string, token: string, putExtra: object, config: object) file: Blob 对象,上传的文件 key: 文件资源名 token: 上传验证信息,前端通过接口请求后端获得 config: object putExtra:

参考

https://developer.qiniu.com/kodo/sdk/1289/nodejshttps://developer.qiniu.com/kodo/sdk/1283/javascript

本文链接:https://blog.qianxiaoduan.com/archives/1065

原文链接:segmentfault.com

上一篇:手撕懒加载
下一篇:JavaScript · 有关Array

相关推荐

  • 预览图像上传之前

    JustinSimbian(https://stackoverflow.com/users/113141/justin)提出了一个问题:Preview an image before it is up...

    2 年前
  • 项目部署阶段nginx

    创建环境变量, 创建.env.production 改一下输出地址,vue.confifig.jsoutputDir: 'dist/bestpractice',构建: npm run bui...

    4 个月前
  • 顶级酒店的ERP系统都应该怎么部署?

    市场上酒店行业的竞争日益激烈,怎样提高酒店的效益是每个酒店目前急切关注的问题,如何利用先进的信息技术和通讯技术优化业务流程,提高服务质量、提升酒店形象,在激烈的市场竞争中保持领先,是现代酒店业普遍关心...

    2 个月前
  • 限制上传文件大小和格式的jQuery插件实例

    本文实例讲述了限制上传文件大小和格式的jQuery插件。分享给大家供大家参考。具体分析如下: 在客户端上传文件,通常需要限制文件的尺寸和格式,最常用的做法是使用某款插件,一些成熟的插件的确界面好...

    5 年前
  • 阿里云部署 5.域名、DNS、nginx

    域名 虽然通过ip地址可以直接访问你的网站,但是我们很少看到网站是通过ip地址访问的,一般网站都会提供域名。域名直观易记,且在用户访问的域名不改变的情况下,解析的ip地址可以更改。

    9 个月前
  • 阿里云部署 4.短信服务

    (https://img.javascriptcn.com/1af9ef467c9d07f9eeadfb62c021120a) 如果你购买了阿里云的短信服务,可以通过短信API实现验证码、推广短信、...

    9 个月前
  • 阿里云部署 3.redis

    (https://img.javascriptcn.com/9654c2b491ebeb170d0e1ebbf5847aba) 下载和编译 启动服务 后台启动redis 查询red...

    9 个月前
  • 阿里云部署 2.mysql

    (https://img.javascriptcn.com/83c26d8f4bf403d7012745fba01c4c49) 下载 直接使用yum快速搭建 启停mysql服务 启动 ...

    10 个月前
  • 阿里云部署 1.起步

    (https://img.javascriptcn.com/064c29e59d8cea0d869dc6822d0cd1cd) 先在阿里云官网https://www.aliyun.com(https...

    10 个月前
  • 阿里云轻量应用服务器部署Node项目手记

    本地和服务器环境 本地:Windows10 64位 服务器:阿里云轻量应用服务器CentOS 7.3 使用的连接工具: putty(http://www.putty.org/) mobaxte...

    2 年前

官方社区

扫码加入 JavaScript 社区