Olá!
Eu estou trabalhando um código que faz um upload de uma foto e salva numa pasta na hospedagem. Eu fiz o esquema de escolher somente fotos e mostrar o nome e os dados do arquivo e ate aí tudo bem, mas eu não conseguir salvar na pasta “upload”. Inspecionei o código e não apontou um erro exato. Seguem o código:
solicitacao-compras.html
<div class="row">
<div class="col-sm-12 col-md-2">
<div class="upload_form_cont">
<label>Foto</label>
<img id="preview" />
</div>
</div>
<div class="col-sm-12 col-md-6 ">
<div class="upload_form_cont">
<form id="upload_form" enctype="multipart/form-data" method="post" action="/profile-upload">
<div>
<div><label for="image_file">Selecione o arquivo de imagem</label></div>
<div><input type="file" name="image_file" id="image_file" accept="image/*" onchange="fileSelected();" /></div>
</div>
<div>
<input type="button" value="Upload" onclick="startUploading()" />
</div>
<div id="fileinfo">
<div id="filename"></div>
<div id="filesize"></div>
<div id="filetype"></div>
<div id="filedim"></div>
</div>
<div id="error">Você deve selecionar apenas arquivos de imagem válidos!</div>
<div id="error2">Ocorreu um erro ao enviar o arquivo</div>
<div id="abort">O upload foi cancelado pelo usuário ou o navegador interrompeu a conexão</div>
<div id="warnsize">Seu arquivo é muito grande. Não podemos aceitar isso. Selecione arquivos pequenos</div>
<div id="progress_info">
<div id="progress"></div>
<div id="progress_percent"> </div>
<div class="clear_both"></div>
<div>
<div id="speed"> </div>
<div id="remaining"> </div>
<div id="b_transfered"> </div>
<div class="clear_both"></div>
</div>
<div id="upload_response"></div>
</div>
</form>
</div>
</div>
</div>
upload-foto.js
var iBytesUploaded = 0;
var iBytesTotal = 0;
var iPreviousBytesLoaded = 0;
var iMaxFilesize = 1048576; // 1MB
var oTimer = 0;
var sResultFileSize = '';
function secondsToTime(secs) { // vamos usar esta função para converter os segundos no formato de hora normal
var hr = Math.floor(secs / 3600);
var min = Math.floor((secs - (hr * 3600))/60);
var sec = Math.floor(secs - (hr * 3600) - (min * 60));
if (hr < 10) {hr = "0" + hr; }
if (min < 10) {min = "0" + min;}
if (sec < 10) {sec = "0" + sec;}
if (hr) {hr = "00";}
return hr + ':' + min + ':' + sec;
};
function bytesToSize(bytes) {
var sizes = ['Bytes', 'KB', 'MB'];
if (bytes == 0) return 'n/a';
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
};
function fileSelected() {
// esconder diferentes avisos
document.getElementById('upload_response').style.display = 'none';
document.getElementById('error').style.display = 'none';
document.getElementById('error2').style.display = 'none';
document.getElementById('abort').style.display = 'none';
document.getElementById('warnsize').style.display = 'none';
// obter o elemento de arquivo selecionado
var oFile = document.getElementById('image_file').files[0];
// filtro para arquivos de imagem
var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
if (! rFilter.test(oFile.type)) {
document.getElementById('error').style.display = 'block';
return;
}
// pequeno teste para o tamanho do arquivo
if (oFile.size > iMaxFilesize) {
document.getElementById('warnsize').style.display = 'block';
return;
}
// obter elemento de visualização
var oImage = document.getElementById('preview');
// preparar HTML5 FileReader
var oReader = new FileReader();
oReader.onload = function(e){
// e.target.result contém o DataURL que usaremos como fonte da imagem
oImage.src = e.target.result;
oImage.onload = function () { // binding onload event
// vamos exibir algumas informações de imagem personalizada aqui
sResultFileSize = bytesToSize(oFile.size);
document.getElementById('fileinfo').style.display = 'block';
document.getElementById('filename').innerHTML = 'Name: ' + oFile.name;
document.getElementById('filesize').innerHTML = 'Size: ' + sResultFileSize;
document.getElementById('filetype').innerHTML = 'Type: ' + oFile.type;
document.getElementById('filedim').innerHTML = 'Dimension: ' + oImage.naturalWidth + ' x ' + oImage.naturalHeight;
};
};
// ler o arquivo selecionado como DataURL
oReader.readAsDataURL(oFile);
}
function startUploading() {
// limpar todos os estados de temperatura
iPreviousBytesLoaded = 0;
document.getElementById('upload_response').style.display = 'none';
document.getElementById('error').style.display = 'none';
document.getElementById('error2').style.display = 'none';
document.getElementById('abort').style.display = 'none';
document.getElementById('warnsize').style.display = 'none';
document.getElementById('progress_percent').innerHTML = '';
var oProgress = document.getElementById('progress');
oProgress.style.display = 'block';
oProgress.style.width = '0px';
// obter dados do formulário para POSTAGEM
//var vFD = document.getElementById ('upload_form'). getFormData ();// para FF3
var vFD = new FormData(document.getElementById('upload_form'));
// crie o objeto XMLHttpRequest, adicionando alguns ouvintes de evento e POSTANDO nossos dados
var oXHR = new XMLHttpRequest();
oXHR.upload.addEventListener('progress', uploadProgress, false);
oXHR.addEventListener('load', uploadFinish, false);
oXHR.addEventListener('error', uploadError, false);
oXHR.addEventListener('abort', uploadAbort, false);
//oXHR.open('POST', 'upload.php', true);
oXHR.send(vFD);
// definir cronômetro interno
oTimer = setInterval(doInnerUpdates, 300);
}
function doInnerUpdates() { // vamos usar esta função para mostrar a velocidade de upload
var iCB = iBytesUploaded;
var iDiff = iCB - iPreviousBytesLoaded;
// se nada novo carregado - sair
if (iDiff == 0)
return;
iPreviousBytesLoaded = iCB;
iDiff = iDiff * 2;
var iBytesRem = iBytesTotal - iPreviousBytesLoaded;
var secondsRemaining = iBytesRem / iDiff;
// atualizar informação de velocidade
var iSpeed = iDiff.toString() + 'B/s';
if (iDiff > 1024 * 1024) {
iSpeed = (Math.round(iDiff * 100/(1024*1024))/100).toString() + 'MB/s';
} else if (iDiff > 1024) {
iSpeed = (Math.round(iDiff * 100/1024)/100).toString() + 'KB/s';
}
document.getElementById('speed').innerHTML = iSpeed;
document.getElementById('remaining').innerHTML = '| ' + secondsToTime(secondsRemaining);
}
function uploadProgress(e) { // processo de upload em andamento
if (e.lengthComputable) {
iBytesUploaded = e.loaded;
iBytesTotal = e.total;
var iPercentComplete = Math.round(e.loaded * 100 / e.total);
var iBytesTransfered = bytesToSize(iBytesUploaded);
document.getElementById('progress_percent').innerHTML = iPercentComplete.toString() + '%';
document.getElementById('progress').style.width = (iPercentComplete * 4).toString() + 'px';
document.getElementById('b_transfered').innerHTML = iBytesTransfered;
if (iPercentComplete == 100) {
var oUploadResponse = document.getElementById('upload_response');
oUploadResponse.innerHTML = '<h1>Aguarde ... processando</h1>';
oUploadResponse.style.display = 'block';
}
} else {
document.getElementById('progress').innerHTML = 'unable to compute';
}
}
function salvarFoto(e){
const express = require('express');
const multer = require('multer');
const app = express();
var port = 3000;
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './upload')
},
filename: function (req, file, cb) {
cb(null, file.originalname)
}
})
var upload = multer({ storage: storage })
app.use('/a',express.static('/b'));
app.use(express.static(__dirname + '/public'));
app.use('/uploads', express.static('../upload'));
app.post('/profile-upload', upload.single('image_file'), function (req, res, next) {
console.log(JSON.stringify(req.file))
var response = '<a href="/">Home</a><br>'
response += "Arquivos enviados com sucesso.<br>"
response += `<img src="${req.file.path}" /><br>`
return res.send(response)
})
app.listen(port,() => console.log(`Server running on port ${port}!`))
}
function uploadFinish(e) { // upload concluído com sucesso
var oUploadResponse = document.getElementById('upload_response');
oUploadResponse.innerHTML = e.target.responseText;
oUploadResponse.style.display = 'block';
document.getElementById('progress_percent').innerHTML = '100%';
document.getElementById('progress').style.width = '400px';
document.getElementById('filesize').innerHTML = sResultFileSize;
document.getElementById('remaining').innerHTML = '| 00:00:00';
clearInterval(oTimer);
salvarFoto();
}
function uploadError(e) { // erro de upload
document.getElementById('error2').style.display = 'block';
clearInterval(oTimer);
}
function uploadAbort(e) { // upload abortado
document.getElementById('abort').style.display = 'block';
clearInterval(oTimer);
}