最近做项目的时候有一个上传图片的需求,由于没有后端的配合,所以决定自己来搭个服务器,实现上传图片功能。以后如果需要修改成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页面即可。
(完)
领取专属 10元无门槛券
私享最新 技术干货