1

Eu estou com um problema de upload de várias imagens com Multer. Vi que ele tem atributos como ANY, SINGLE e ARRAY. Eu consigo usar o SINGLE para enviar uma única imagem, no entanto eu preciso usar várias imagens, e não estou conseguindo implementar. Meu código é o seguinte:

const express = require('express');
const multer = require('multer');
const ejs = require('ejs'); 
const path = require('path');

//Indicar o Engine de Armazenamento
const storage = multer.diskStorage({
destination: './public/uploads/',
filename: function(req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + 
path.extname(file.originalname));
}
});

// Init Upload
const upload = multer({
storage: storage,
limits: { fileSize: 40000 },
fileFilter: function(req, file, cb) {
checkFileType(file, cb);
}
}).single('myImage');

// Check File Type
function checkFileType(file, cb) {
// Allowed ext
const filetypes = /jpeg|jpg|png|gif/;
// Check ext
const extname = 
filetypes.test(path.extname(file.originalname).toLowerCase());
// Check mime
const mimetype = filetypes.test(file.mimetype);

if (mimetype && extname) {
    return cb(null, true);
} else {
    cb('Error: Images Only!');
}
}

// Init app
const app = express();

// EJS
app.set('view engine', 'ejs');

// Public Folder
app.use(express.static('./public'));

app.get('/', (req, res) => res.render('index'));

app.post('/upload', (req, res) => {
upload(req, res, (err) => {
    if (err) {
        res.render('index', {
            msg: err
        });
    } else {
        if (req.file == undefined) {
            res.render('index', {
                msg: 'Nenhum Arquivo Selecionado!'
            });
        } else {
            res.render('index', {
                msg: 'Arquivo(s) Enviados',
                file: `uploads/${req.file.filename}`
            });
        }
    }
    });
    });

Como eu consigo obter da página varias imagens? Meu front é este:

<h4 class="center">Processar Imagem</h4>
<div class="row col s6 offset-s4 center ajuste">
  <%= typeof msg != 'undefined' ? msg : '' %>
    <form action="/upload" method="POST" enctype="multipart/form-data">
      <div class="file-field input-field offset-s4">
        <div class="btn gradient-45deg-blue-indigo">
          <span id="total">Arquivo(s)</span>
          <input type="file" id="files" name="myImage[]" multiple />

        </div>

        <div class="file-path-wrapper">
          <input class="file-path validate" type="text" placeholder="Escolha um ou 
        mais imagens">
        </div>
      </div>
      <output id="list"></output>

      <button class="btn btn-success waves-effect waves-light gradient-45deg- 
        blue-indigo" id="enviar" type="submit" name="action">Enviar<i 
        class="material-icons left">send</i>
        </button>

    </form>
    <br>

    <img src="<%= typeof file != 'undefined' ? file : ''%>" class="responsive-img" alt="">
</div>


<div class="row">

  <output id="list"></output>

</div>
1

2 Respostas 2

2

Multer é uma biblioteca muito flexivel, para o seu caso em especifico use a opção .array(), esta opção requer o nome do campo e opcionalmente pode-se definir um segundo argumento para limitar a quantidade de arquivos.

Algo basico seria como:

const storage = multer.diskStorage({
    // destino
    destination: function (req, file, cb) {
        cb(null, './public/uploads/')
    },
    filename: function (req, file, cb) {
        cb(null, file.originalname);
    }
});
//
const upload = multer({ storage: storage });
// na rota com limite de 10 arquivos
app.post("/upload", upload.array("myImage[]", 10), function (req, res) {
    console.log('files', req.files);
});

Tente pelo básico e então comece a adicionar seus filtros e configurações personalizadas.

1
  • Vou tentar pessoal, mas acredito que funcione! Obrigado pela ajuda de vocês! Commented 28/01/2018 às 14:43
1

Olá, upload de vários arquivos conforme a lib multer, conforme a documentação você deve adicionar o atributo files no momento da criação dos limits, o seu código ficaria dessa forma/:

    // Init Upload
    const upload = multer({
    storage: storage,
    limits: { fileSize: 40000, files: 10 },//supondo que o máximo seriam 10 arquivos
    fileFilter: function(req, file, cb) {
    checkFileType(file, cb);
    }
    }).array('myImage');

depois em seu html o atributo name em seu form deve possuir o mesmo nome que você passou na função multer que nesse caso seria o 'myImage' Então o seu form ficaria:

     <input type="file" id="files" name="myImage" multiple />

Em seu método você verifica o mimetype e a extensão utilizando o file, porém quando utiliza-se o método array do multer, você deve iterar um array de arquivos que foram enviados no momento do upload.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .