node+express上传图片到七牛

桃扇骨 2022-04-03 15:28 257阅读 0赞

> 本人微信公众号： **前端修炼之路**，欢迎关注

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

这里使用的技术为`node.js` \+ `qiniu nodeJS SDK`\+`qiniu JS SDK` \+ `express` \+ `html5`。

# 1. 安装express 和 qiniu #

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

cnpm init 
    cnpm install express --save
    cnpm install qiniu --save

说明：

*  使用了`cnpm`替换`npm`命令，这是因为前者会比后者更快一些。
 *  第一条命令会在目录下创建一个`package.json`文件，然后在命令行中一路回车就好。
 *  在命令后面添加`--save`可以在`package.json`文件的`dependencies`属性中，将express和qiniu添加上。这样以后换一个目录，在没有`node_modules`目录时，直接使用`npm install`就可以安装了。

# 2.配置七牛 AccessKey/SecretKey #

首先肯定是要注册一个七牛账号的。可以点我的分享链接直接注册：[https://portal.qiniu.com/sign...][https_portal.qiniu.com_sign...]

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

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

回到项目目录下，创建一个`config.json`，将下面的内容粘贴进去

{
        "AccessKey": "<Your Access Key>",  // https://portal.qiniu.com/user/key
        "SecretKey": "<Your Secret Key>",
        "Bucket": "<Your Bucket Name>",
        "Port": 9000,
        "UptokenUrl": "uptoken",
        "Domain": "<Your Bucket Domain>" // bucket domain eg:http://qiniu-plupload.qiniudn.com/
    }

需要替换其中的AccessKey和SecretKey。然后修改Bucket值为刚才创建的`qiniu_test`。其中的Domain，可以在空间概述中找到一个类似`http://qiniu-plupload.qiniudn.com`这样域名。以后访问文件的时候，就可以通过这个域名来访问的。

# 3.配置服务 #

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

*  要想往七牛云空间上传图片，一定要用到`token`这个参数。这个token是通过后端服务器获取出来的，因为我用的是node.js所以用qiniu的nodeJS SDK，如果是其他后端语言，就可以选择别的SDK。
 *  获取这个`token`需要根据之前配置好的AccessKey和SecretKey。所以通过`fs.readFileSync`把config.json这个文件中的配置项获取出来。
 *  express 就可以接受前端的请求。因为上传之前必须要`token`，所以提供一个借口`api/uptoken`，向前端返回拼接好的token字符串。

# 4.添加测试页面 #

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

<!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>index.html</title>
            <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
            <script src="https://unpkg.com/qiniu-js@2.5.1/dist/qiniu.min.js"></script>
        </head>
    
        <body>
            <h1>测试七牛云上传图片</h1>
            <form action="upload" method="post" enctype="multipart/form-data">
                <input class="file-input" type="file" id="select" />
            </form>
            <div id="result">
                
            </div>
            <button onclick="clickButton()">请求图片</button>
            <div id="pics"></div>
            <script type="text/javascript">
                var result;
                var fileName;
                var domain = 'http://siberiawolf.qiniudn.com/';
                
                var complete = function(res){
                    $('#result').html('<img src='+result.domain+'/'+fileName+' />');
                }
                
                 var subObject = { 
    //                next: next,
    //                error: error,
                    complete: complete
                  };
                
                $.ajax({
                    type: "get",
                    url: "/api/uptoken",
                    async: true,
                    success: function(res) {
                        result = res;
                    }
                });
                
                $('#select').on('change', function() {
                    var file = this.files[0];
                        fileName = 'image/test/'+file.name;
                    var token = result.uptoken;
                    var domain = result.domain;
                    var config = {
                        useCdnDomain: true,
                        disableStatisticsReport: false,
                        retryCount: 6,
                        region: qiniu.region.z0
                    };
                    var putExtra = {
                          fname: "",
                          params: {},
                          mimeType: null
                    };
                    var observable = qiniu.upload(file, fileName, token, putExtra, config);
                    
                    var subscription = observable.subscribe(subObject);
                });
                var marker = '';
                function clickButton(){
                    $.ajax({
                        type: "get",
                        url: "/api/getImg",
                        async: true,
                        data:{
                            marker: marker
                        },
                        success: function(res) {
                            var items = res.items;
                            marker = res.marker;
                            var html = '';
                            items.forEach(function(val, index){
                                html += '<img src='+domain+val.key+' />'
                            });
                            $('#pics').html(html);
                        }
                    });
                }
            </script>
        </body>
    
    </html>

*  上传之前必须要获取到`token`，所以先请求了一下接口。
 *  通过指定`qiniu.upload`第二个参数，并添加文件路径前缀，将图片路径区分开。
 *  获取图片列表，用的是qiniu提供的api。

# 5.启动服务 #

`node server.js`启动服务，然后访问index.html页面即可。

来源：[https://segmentfault.com/a/1190000017064729][https_segmentfault.com_a_1190000017064729]

[https_portal.qiniu.com_sign...]: https://portal.qiniu.com/signup?code=3l8fij4ieuvrm
[https_segmentfault.com_a_1190000017064729]: https://segmentfault.com/a/1190000017064729