图片上传功能

在个人项目中遇到图片上传的问题,由于base64格式字符长度限制,选择使用文件上传接口。接口会在根目录创建uploads文件夹存储上传的图片,然后通过回调函数将图片移动到静态资源文件夹。为避免uploads文件夹堆积临时文件,实现在上传时自动清空。先存图片到服务器,再通过另一接口将图片与其他数据保存到数据库。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我在写一个自己的项目时,发现图片上传功能不能使用将图片转换成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文件夹,然后我就上度娘白嫖了后面的这些代码实现了我的需求。

然后写完接口之后,我去项目中使用这个接口,值得注意的是,这个接口只是用来将图片存进静态资源管理文件夹中,而非将其直接存进数据库,因此也有了一个先后顺序,就是先存图片到服务器再将图片以及其他需要上传的数据一起通过另外一个接口传到数据库保存。

这就是整个上传图片功能的流程,可能还有更好的方法,但目前我所熟知的就是这个方法。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值