Skip to main content
removeu 197 caracteres do conteúdo
Fonte Link
Cmte Cardeal
  • 7mil
  • 5
  • 27
  • 54
   `<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>

`

<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>
   `<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>

`

<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>
Fonte Link

Upload de várias imagens com Multer

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>

`