我在写一个自己的项目时,发现图片上传功能不能使用将图片转换成base64格式的方法,因为base64格式的字符长度超出了服务器限制的字节长度(八千多字节),所以我另辟蹊径,通过写文件上传功能接口:
// 下载multer这个包,并导入以下两个模块
const multer = require('multer')
const upload = multer({ dest: 'uploads/' })
// 使用multer包写文件上传功能的接口
//上传
router.post('/uploads/img', upload.single('img'), userHandler.uploads)
该接口会在发送请求(上传文件)之后在根目录自动创建一个uploads文件夹,用于临时存储上传的本地文件,并赋予新的filename,此时我们要做的就是通过写接口的回调函数来让uploads里的文件传到静态资源管理文件夹中
//上传
exports.uploads = (req, res, next) => {
const files = req.file
const filename = new Date().getTime() + '.jpg'
const filepath = path.join(__dirname, '../publish/img/', filename)
fs.readFile(files.path, (err, data) => {
fs.writeFile(filepath, data, (results) => {
res.send({
url: '/img/' + filename
})
// 清空uploads文件夹
const removeDir = (option) => {
const { dir } = option;
if (!dir || !fs.existsSync(dir)) return;
// 读取目录中文件夹
const files = fs.readdirSync(dir);
files.forEach((file) => {
const filePath = path.resolve(dir, file);
const stat = fs.lstatSync(filePath);
// 如果是directory, 就递归
if (stat.isDirectory()) {
removeDir({ dir: filePath });
return;
}
// 如果是文件 就删除
if (stat.isFile()) {
fs.unlinkSync(filePath);
}
})
}
removeDir({ dir: path.join(__dirname, '../uploads/') });
})
})
}
在写完此回调函数后,我遇到了一些问题,就是发送请求之后uploads中的文件(可以理解为临时文件)会越来越多,但当我将图片上传到静态资源管理之后这些图片文件就没用了,于是我想能不能当它在发送请求的同时自动清空一遍uploads文件夹,然后我就上度娘白嫖了后面的这些代码实现了我的需求。
然后写完接口之后,我去项目中使用这个接口,值得注意的是,这个接口只是用来将图片存进静态资源管理文件夹中,而非将其直接存进数据库,因此也有了一个先后顺序,就是先存图片到服务器再将图片以及其他需要上传的数据一起通过另外一个接口传到数据库保存。
这就是整个上传图片功能的流程,可能还有更好的方法,但目前我所熟知的就是这个方法。