账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    express新手,express使用multer多图片上传5张图片,req.files的长度是1,如何解决
    23
    0
    我在前端上传5张图片,express接收multer处理过的图片,然后再用webp-converter压缩图片但是req.files接收到的数组只有1张图片。最后的处理结果并没有返回图片的返回地址,本人新手小白,还请大佬指教前端使用axios上传图片代码export function uploadimgs(FormData){return request({ url:'/articles/uploadimg', method:'post', data:FormData, // 发送图片格式 contentType: 'multipart/form-data'})}express处理控制层// 文章内容图片const postarticlesimg = async (req, res) => { //储存图片路径 const imgurls = []; console.log('数组的长度是:',req.files); if (req.files.length === 0) { res.json({ code: 400, message: '上传文件不能为空!', }) return; } else { const imgtmp = converter(req.files[0]); if (imgtmp) { imgurls.push(imgtmp) } res.json({ status: 200, message: '上传成功', data: { imgUrl: imgurls, } }) }}module.exports = { getArticlesList, postimg, postarticlesimg}中间件multer中间件const multer = require('multer')const path = require('path')const fs = require('fs')const storage = multer.diskStorage({ destination: function (req, file, cb) { let date = new Date(); let year = date.getFullYear(); let month = (date.getMonth() + 1).toString().padStart(2, '0'); let day = date.getDate(); // 上传图片存放的目录 let dir = "./public/upload/articlesimg" + year + month + day; // 判断目录是否存在,没有则创建 if (!fs.existsSync(dir)) { fs.mkdirSync(dir, { recursive: true }) } cb(null, dir); }, // 自定义的文件名 filename: function (req, file, cb) { // var fileFormat = (file.originalname).split("."); // cb(null, fileFormat[0] + '-' + Date.now() + "." + fileFormat[fileFormat.length - 1]); // 获取文件后缀名 let fileName = Date.now() + path.extname(file.originalname); // fileName是上传文件的文件名 cb(null, fileName); } // })//设置过滤规则(可选)var imageFilter = function (req, file, cb) { var acceptableMime = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'] if (acceptableMime.indexOf(file.mimetype) !== -1) { cb(null, true) } else { cb(null, false) }}//设置限制(可选)const imageLimit = { fieldSize: '2MB'}// uploadImg.array('file',12),接收以'file'命名的上传文件数组,限制最多上传12个文件const uploadmany = multer({ storage: storage,fileFilter: imageFilter, limits: imageLimit }).array('images', 12);//file为上传时的name值,例如el-upload要设置name=“file”,element-ui自定义上传的时候需要也要用fs.append("file",file.file),参数一和single(file)里面的参数相同module.exports = { uploadmany}webp-converter中间件// 压缩图片为webp格式const webp = require('webp-converter');const fs = require('fs')exports.converter =async function (file) { // var img = file.filename; // 图片名字 var imgType = file.mimetype; // 图片类型 var url = (file.path).replace(/\\/g, '/'); // 图片地址 if (imgType == "image/png" || imgType == "image/jpeg") { // 压缩转换为webp格式图片 webp.cwebp前两个参数,第一个为原文件地址,第二个为生成的目标文件 webp.cwebp(url, (file.path).replace(/\\/g, '/').split(".")[0] + ".webp", "-q 80", logging = "-v").then(response => { console.log(response); }) // 压缩图片为webp格式后删除原文件 var oldUrl = (file.path).replace(/\\/g, '/'); // 原文件地址 fs.unlinkSync(oldUrl, function (error) { if (error) { console.log(error); return false; } console.log('删除文件成功'); const imgurl = "http://localhost:3008/" + (file.path).replace(/\\/g, '/').split(".")[0] + ".webp" console.log("是否返回图片地址", imgurl); return imgurl; }) }}路由router.post('/articles/uploadimg',uploadmany,postarticlesimg)
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • ℡音符流濄の回忆 普通会员 1楼

      在Express中,multer是用于处理文件上传的中间件,它需要一个名为'multipart'的中间件。这个中间件可以帮助你处理文件的多个部分,而不是像在其他一些库中那样将它们分组。

      以下是一个简单的示例,展示了如何使用multer处理5张图片:

      ```javascript const express = require('express'); const multer = require('multer'); const path = require('path');

      const app = express();

      // 设置上传文件的格式和接收文件的存储路径 const upload = multer({ dest: path.join(__dirname, 'uploads'), limits: { fileSize: 10000000 }, // 限制文件大小为1MB fileFilter(req, file, cb) { // 如果文件是图片,就检查其内容 if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png') { cb(null, true); } else { cb(new Error('文件不是图片'), false); } } });

      // 创建一个处理上传的处理器 app.post('/upload', upload.single('image'), (req, res) => { console.log(req.file); res.send('文件已上传'); });

      app.listen(3000, () => { console.log('Express server started on port 3000'); }); ```

      在这个示例中,我们创建了一个新的中间件upload,它将图片上传到一个名为'uploads'的目录中。我们还设置了上传文件的大小限制为1MB,并设置了文件过滤规则,只有jpg和png格式的图片才能被上传。

      然后,我们创建了一个处理上传的处理器。在处理器中,我们打印出上传的文件,并在服务器端发送一条消息确认文件已上传。

      注意,这只是一个基本的示例。在实际使用中,你可能需要处理更多的文件类型、更复杂的文件过滤规则、错误处理等。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部