node结合七牛云实现文件上传

安装插件

首先要安装所需的插件qiniu和formidable

npm i qiniu --save
npm i formidable --save

编辑配置文件

let config = {};
config.accessKey = xxx';
config.secretKey = 'xxx';
config.bucket = 'xxx';  //存储空间的名字
config.url = 'xxx';  //配置的域名
module.exports = config;

我封装的组件，新建一个js文件复制代码进入就可以使用

let qiniu = require('qiniu');
let formidable = require('formidable');
let fs = require('fs');
let config = require('./config.js');

let qn = {};

//要上传的空间
let bucket = config.bucket;   //七牛云存储的存储空间名

//构建上传策略函数   （获取七牛上传token）
qn.uptoken = function(bucket) {
    var putPolicy = new qiniu.rs.PutPolicy({ scope: bucket });
    var accessKey = config.accessKey;   
    var secretKey = config.secretKey;
    var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
    var uploadToken=putPolicy.uploadToken(mac);
    return uploadToken;
}

qn.upImg = function(req,callback){
    let callbackObj = {};   //回调函数返回的对象
    var form = new formidable.IncomingForm();   //创建上传表单
    form.encoding = 'utf-8';        //设置编辑
    //form.uploadDir = '../../uploadimg';     //设置上传目录 设置则会存储在中控服务器，不设置则建立一个临时文件 最后要上传到七牛，所以不用设置
    form.keepExtensions = true;     //保留后缀
    form.maxFieldsSize = 5 * 1024 * 1024;   //文件大小5M    报错413上传文件太大了
    form.parse(req, function(err, fields, files) {
        if (err) {
            // res.locals.error = err;
            callbackObj.status = 1;
            callbackObj.msg = err;
            console.log('err==',err);
            return callback(callbackObj);
        }
        console.log(files.file.path);
        //上传到七牛后保存的文件名
        let key = new Date().getTime();
        //生成上传 Token
        let token = qn.uptoken(bucket);
        //要上传文件的本地路径
        let filePath = files.file.path;     //如果是表单的数据提交会存储在fields中，图片文件提交会存储在files中 files.file中的file指的是前端设定input的name一般设置为file
        
        //构造上传函数
        // 文件上传（以下四行代码都是七牛上传文件的配置设置）
        var config = new qiniu.conf.Config();
        config.zone = qiniu.zone.Zone_z0;  //设置传输机房的位置根据自己的设置选择
        var formUploader = new qiniu.form_up.FormUploader(config);
        var putExtra = new qiniu.form_up.PutExtra();
        formUploader.putFile(token, key, filePath, putExtra, function(respErr,respBody, respInfo) {
            if (respErr) {
                callbackObj.status = 1;
                callbackObj.msg = respErr;
                return callback(callbackObj);
            }
            if (respInfo.statusCode == 200) {//上传成功
                console.log(respBody);
                // 输出 JSON 格式  xxx填写自己在七牛中设置的自定义域名
                var response = {
                    "url":config.url+key
                };
                console.log(response);
                // res.end(JSON.stringify(response));
                callbackObj.status = 0;
                callbackObj.data = response;
                return callback(callbackObj);
            } else {//上传失败
                console.log(respInfo.statusCode);
                console.log(respBody);
                callbackObj.status = 1;
                callbackObj.msg = respBody;
                return callback(callbackObj);
            }
        });
    });
}

// console.log(qn.uptoken(bucket));

module.exports = qn;

组件完成，在路由当中引用

let qn = require('./qiniu');  //导入七牛文件   上方组件文件我命名qiniu.js
//结果包装函数
let result = function (obj,bool){
    if(bool){
        return {status:0,data:obj};
    }else{
        return {status:1,data:obj};
    }
}
//上传图片
app.post("/upImg",function(req,routerRes){
    try{
        qn.upImg(req,function(res){
            console.log('res',res);
            if(res.status == 0){
                routerRes.json(result(res.data,true));
            }else{
                routerRes.json(result(res.msg,false));
            }
        });
    }catch(err){
        if(err){
            console.log('trycatch报错====',err);
        }
    }
})

结果

前端调用写法

结合elementui的写法

<el-upload
        class="upload-demo"
        action="http://127.0.0.1:8090/upImg"
        multiple>
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

因为element UI 默认的input的name为file所以不用设置

一般的input写法

<form class="form-signin" role="form" method="post" enctype='multipart/form-data' action="http://127.0.0.1:8090/upImg">
        <h2 class="form-signin-heading">上传文件</h2>
        <input id="fulAvatar" name="file" type="file" class="form-control" />
        <br/>
        <button id="btnSub" class="btn btn-lg btn-primary" type="submit">上 传</button>
</form>

当表单提交的过程中涉及文件或图片上传，则一定要设置表单头，即在form标签上加上固定写法的属性为enctype=“multipart/form-data”，否则文件或图片会上传失败。其中，当中的name属性一定要赋值。