node+express上传图片到七牛云

最近做项目的时候有一个上传图片的需求,由于没有后端的配合,所以决定自己来搭个服务器,实现上传图片功能。以后如果需要修改成java或者php为后端,直接使用即可,而不用等到后端联调的时候再去动手。

这里使用的技术为 + + + + 。

1.安装express 和 qiniu

首先需要安装node.js,然后新建一个目录在目录下面依次执行下面的命令

说明:

使用了替换命令,这是因为前者会比后者更快一些。

第一条命令会在目录下创建一个文件,然后在命令行中一路回车就好。

在命令后面添加可以在文件的属性中,将express和qiniu添加上。这样以后换一个目录,在没有目录时,直接使用就可以安装了。

2.配置七牛密钥

首先肯定是要注册一个七牛账号的。可以点我的分享链接直接注册:https://portal.qiniu.com/signup?code=3l8fij4ieuvrm

创建一个七牛存储空间,这里假设空间名字为。

在个人中心中,找到密钥管理,创建一个密钥。之后就会生成一个accessKey和secretKey。

回到项目目录下,创建一个,将下面的内容粘贴进去

需要替换其中的AccessKey和SecretKey。然后修改Bucket值为刚才创建的。其中的Domain,可以在空间概述中找到一个类似这样域名。以后访问文件的时候,就可以通过这个域名来访问的。

3.配置服务

在项目目录中创建一个server.js,将下面的内容拷贝其中。然后我逐一解释下。

要想往七牛云空间上传图片,一定要用到这个参数。这个token是通过后端服务器获取出来的,因为我用的是node.js所以用qiniu的nodeJS SDK,如果是其他后端语言,就可以选择别的SDK。

获取这个需要根据之前配置好的AccessKey和SecretKey。所以通过把config.json这个文件中的配置项获取出来。

express 就可以接受前端的请求。因为上传之前必须要,所以提供一个借口,向前端返回拼接好的token字符串。

4.添加测试页面

在项目目录下创建一个index.html,将如下内容拷贝其中

上传之前必须要获取到,所以先请求了一下接口。

通过指定第二个参数,并添加文件路径前缀,将图片路径区分开。

获取图片列表,用的是qiniu提供的api。

5.启动服务

启动服务,然后访问index.html页面即可。

(完)

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20181211G05GMP00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券