在 React 和 Express de NodeJs hosteada 和 render 上应用。 Quiero utilizar subida de ficheros más concretamente subida de fotos desde el cliente al servidor。他使用 dos maneras de hacerlo una con multer que es una librería a parte y otra con fileUpload que es del propio express。 Las dos funcionan perfectamente en un ordenador ya sea en local o en la versión en producción en la página。 Pero cuando into subir una foto desde el móvil directamente no se sube nada, no se mueve ninguna foto al servidor ni se ejecuta la query que añade una publicación。 Pero en el ordenador funciona perfectamente。他在所有内容和视频中都可以单独使用 subida de ficheros desde un ordenador que eso si me funciona。 Querría ver si hay alguna limitación o alguna manera concreta de hacerlo para subir foto con React y NodeJs con un móvil。 El error viene seguramente porque no se ejecute las funciones que mueven los archivos como file.mv() o upload.single() pero no le encuentro el sentido porque en el ordenador funciona perfectamente
Trozo de código del cliente en React:
const handleFileChange = (event) => {
setFile(event.target.files[0]);
var preview = event.target.parentNode.querySelector('.file-preview');
var file = event.target.files[0];
var reader = new FileReader();
reader.onloadend = function() {
preview.innerHTML = '<img src="' + reader.result + '" class="filePreviewImg">';
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.innerHTML = '<i className="fas fa-plus"></i>';
}
};
function handleSubmit () {
if (file == null) {
return;
}
let form = document.getElementById("headerUploadForm");
let descripcion = document.getElementById("headerUploadDescripcion");
form.submit();
const formData = new FormData();
formData.append("file", file);
if(descripcion.value != "") {
formData.append("description", descripcion.value);
}
if(selectedPersonasToEtiquetar != null) {
formData.append("etiquetar", selectedPersonasToEtiquetar.id);
}
if(selectedPersonasToEnviar != null) {
let mensaje = document.getElementById("mensajeParaCompartirUpload");
if (mensaje.value != "") {
formData.append("mensaje", mensaje.value);
}
formData.append("enviar", selectedPersonasToEnviar.id);
}
fetch(props.url+"/api/upload/" + props.user.usuario + '/' + props.user.id, {
method: "POST",
body: formData
})
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error(error));
};
return (
<>
<div className='headerUploadDiv'>
<div className='headerUploadImageDiv'>
<form id="headerUploadForm">
<div className="file-upload">
<label htmlFor="file-input">
<div className="file-preview">
<img src="./assets/boton-circular-plus.png" className='fotoAddPhotoUpload'/>
</div>
</label>
<input id="file-input" type="file" onChange={props.handleFileChange} required/>
</div>
<input type="text" name="descripcion" id="headerUploadDescripcion" placeholder="Escribe una descripción" className='headerUploadDescripcion'/>
<button className="btn btn-outline-secondary" onClick={handleSubmit}>Publicar</button>
</form>
</div>
</div>
</>
);
Parte de código en el servidor:
const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const cors = require('cors');
const fileUpload = require('express-fileupload');
const app = express();
const cookieParser = require('cookie-parser');
const port = 3080;
// mysql
const mysql = require('mysql');
const connection = mysql.createConnection({
host: '-',
user: '-',
password: '-',
database: '-'
})
// multer sirve para subir archivos
const multer = require('multer');
// app y rutas
// app.use(bodyParser.json());
// app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.json());
app.use(cors());
app.use(fileUpload());
app.use(express.static(path.join(__dirname, './public')));
app.use(cookieParser());
app.get('/', (req, res) => {
res.send('Iniciado');
});
穆尔特：
app.post('/api/upload/:user/:id', (req, res) => {
const user = req.params;
const storage = multer.diskStorage({
destination: function (req, file, cb) {
// PRODUCCION
cb(null, "./public/uploaded/" + user.user + "/publicaciones/");
// DESARROLLO
// cb(null, "../client/public/uploaded/" + user.user + "/publicaciones/");
},
filename: function (req, file, cb) {
file.originalname = new Date().getTime() + file.originalname;
cb(null, file.originalname);
},
});
const upload = multer({ storage });
upload.single('file')(req, res, function (err) {
// guardar en la base de datos de la publicacion y la descripcion
let descripcion = null;
if (req.body.description){
descripcion = req.body.description;
}
let fechaActual = new Date();
let fechaActualString = fechaActual.getFullYear() + '-' + ('0' + (fechaActual.getMonth() + 1)).slice(-2) + '-' + ('0' + fechaActual.getDate()).slice(-2);
connection.query('INSERT INTO joint (sustancia, tamaño, cantidad, boquilla, valoracion, foto, id_usuario, fecha, descripcion) VALUES ("-", "-", "0", "-", "0", ?, ?, ?, ?)', [req.file.originalname, user.id, fechaActualString, descripcion], (err, rows, fields) => {
if (err) throw err
console.log('The solution is: ', rows)
})
console.log(req.file.originalname);
if(req.body.etiquetar) {
// comprueba si hay etiquetados y si los hay los guarda en la base de datos
connection.query('SELECT id FROM joint WHERE foto = ?', [req.file.originalname], (err, rows, fields) => {
if (err) throw err
connection.query('INSERT INTO etiquetados (id_joint, id_usuario1, id_usuario2) VALUES (?, ?, ?)', [rows[0].id, req.body.etiquetar, user.id], (err, rows, fields) => {
if (err) throw err
console.log('The solution is: ', rows)
})
})
}
if (req.body.enviar) {
console.log('hay enviar en la peticion para enviar al usuario tal: ' + req.body.enviar)
if (req.body.mensaje) {
console.log('hay mensaje en la peticion para enviar al usuario tal: ' + req.body.enviar + ' y el mensaje es: ' + req.body.mensaje)
}
}
});
});
文件上传：
app.post('/api/upload/:user/:id', (req, res) => {
const user = req.params;
const file = req.files.file;
const fileName = new Date().getTime() + file.name;
// file.mv("../client/public/uploaded/" + user.user + "/publicaciones/" + fileName, function(err)
file.mv("./public/uploaded/" + user.user + "/publicaciones/" + fileName, function(err)
{
if (err) {
console.log(err);
return res.status(500).send(err);
}
// guardar en la base de datos de la publicacion y la descripcion
let descripcion = null;
if (req.body.description){
descripcion = req.body.description;
}
let fechaActual = new Date();
let fechaActualString = fechaActual.getFullYear() + '-' + ('0' + (fechaActual.getMonth() + 1)).slice(-2) + '-' + ('0' + fechaActual.getDate()).slice(-2);
connection.query('INSERT INTO joint (sustancia, tamaño, cantidad, boquilla, valoracion, foto, id_usuario, fecha, descripcion) VALUES ("-", "-", "0", "-", "0", ?, ?, ?, ?)', [fileName, user.id, fechaActualString, descripcion], (err, rows, fields) => {
if (err) throw err
console.log('The solution is: ', rows)
})
if(req.body.etiquetar) {
// comprueba si hay etiquetados y si los hay los guarda en la base de datos
connection.query('SELECT id FROM joint WHERE foto = ?', [fileName], (err, rows, fields) => {
if (err) throw err
connection.query('INSERT INTO etiquetados (id_joint, id_usuario1, id_usuario2) VALUES (?, ?, ?)', [rows[0].id, req.body.etiquetar, user.id], (err, rows, fields) => {
if (err) throw err
console.log('The solution is: ', rows)
})
})
}
if (req.body.enviar) {
console.log('hay enviar en la peticion para enviar al usuario tal: ' + req.body.enviar)
if (req.body.mensaje) {
console.log('hay mensaje en la peticion para enviar al usuario tal: ' + req.body.enviar + ' y el mensaje es: ' + req.body.mensaje)
}
}
res.send('Archivo subido correctamente');
console.log('Archivo subido correctamente');
});
});