参考博客
https://blog.csdn.net/zhuming3834/article/details/77531127?locationNum=6&fps=1
获取配置参数
首先使用阿里云上传图片需要有阿里云的对象存储
然后获取几个关键配置数据(参考博客里面有原博主获取这五个参数的详细步骤,我就不再多做赘述了)
region: 'oss-cn-shanghai',
accessKeyId: 'L***************B',
accessKeySecret: 'I********************i',
bucket: 'imagepath',
endPoint: 'oss-cn-shanghai.aliyuncs.com',
有了这五个参数后就是node后台代码的实现了
需要用到几个组件co,multer,ali-oss
安装依赖
npm i co --save
npm i multer --save
npm i ali-oss --save
安装完成后的node后台代码
var express = require('express');
var router = express.Router();
var fs = require('fs');
// 初始化Client
var co = require('co');
var OSS = require('ali-oss');
var client = new OSS({
region: 'oss-cn-shanghai',
accessKeyId: 'L***************B',
accessKeySecret: 'I********************i'
});
var ali_oss = {
bucket: 'imagepath',
endPoint: 'oss-cn-shanghai.aliyuncs.com',
}
// 微信小程序 图片上传
var multer = require('multer')
var upload = multer({ dest: './tmp/' })
// 图片上传
router.all('/upload2', upload.single('file'), function(req, res, next){
// 文件路径
var filePath = './' + req.file.path;
// 文件类型
var temp = req.file.originalname.split('.');
var fileType = temp[temp.length - 1];
var lastName = '.' + fileType;
// 构建图片名
var fileName = Date.now() + lastName;
// 图片重命名
fs.rename(filePath, fileName, (err) => {
if (err) {
res.end(JSON.stringify({status:'102',msg:'文件写入失败'}));
}else{
var localFile = './' + fileName;
var key = fileName;
// 阿里云 上传文件
co(function* () {
client.useBucket(ali_oss.bucket);
var result = yield client.put(key, localFile);
var imageSrc = 'http://image.hgdqdev.cn/' + result.name;
// 上传之后删除本地文件
fs.unlinkSync(localFile);
res.end(JSON.stringify({status:'100',msg:'上传成功',imageUrl:imageSrc}));
}).catch(function (err) {
// 上传之后删除本地文件
fs.unlinkSync(localFile);
res.end(JSON.stringify({status:'101',msg:'上传失败',error:JSON.stringify(err)}));
});
}
});
})
module.exports = router;
代码里面有个域名的设置,这个位置一定要设置为自己的阿里云的域名,要不然会导致图片访问失败
前端访问
<form action="upload2" method="post" enctype="multipart/form-data">
<input type="file" name="file" />
<input type="submit" />
</form>
PS:大部分内容在参考博客里面原博主都有提到,我只是对后端代码部分进行了略加丰富