node实现文件上传至七牛云

node实现文件上传至七牛云

node 后端上传

插件安装

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

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

配置文件

const config = {};
config.accessKey = 'xxx';   //七牛云Ak密匙
config.secretKey = 'xxx';  //七牛云Sk密匙
config.bucket = 'xxx';  //存储空间的名字
config.url = 'xxx';  //配置的域名
module.exports = config;

封装上传七牛云方法

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

const qn = {};

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

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

qn.upImg = function(req,callback){
    const callbackObj = {};   //回调函数返回的对象
    const 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);
        //上传到七牛后保存的文件名
        const key = new Date().getTime();
        //生成上传 Token
        const token = qn.uptoken(bucket);
        //要上传文件的本地路径
        const filePath = files.file.path;     //如果是表单的数据提交会存储在fields中，图片文件提交会存储在files中 files.file中的file指的是前端设定input的name一般设置为file
        
        //构造上传函数
        // 文件上传（以下四行代码都是七牛上传文件的配置设置）
        const config = new qiniu.conf.Config();
        config.zone = qiniu.zone.Zone_z0;  //设置传输机房的位置根据自己的设置选择
        const formUploader = new qiniu.form_up.FormUploader(config);
        const 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填写自己在七牛中设置的自定义域名
                const 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;

在路由中调用

const qn = require('./qiniu');  //导入七牛文件   上方组件文件我命名qiniu.js
//上传图片
app.post("/upImg",function(req,res){
    const promise = new Promise(resolve => {
        qn.upImg(req,function(resData) {
            resolve(resData)
        })
    }).catch(err=>{
        throw err //抛出错误
    })
    const data = promise
    res.send(data)
})

前端调用

input框调用方法

<!--from文件上传一定要添加enctype = 'multipart/form-data' name也需要赋值-->
<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>

element-ui使用方法

<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>