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>