![](/img/trans.png)
[英]Unable to upload files to Node.js, Express backend using Multer
[英]Unable to upload file on a folder on REACT, Express, multer, node.js
我是新來的反應本地人。 我無法在我的文件夾中上傳照片。 雖然 node-mon 和 react-native 服務器沒有顯示任何錯誤。 但仍然無法從數據庫中獲得響應。 我想將照片上傳到文件夾,並將信息的 rest 保存到我的 postgres 數據庫中。
前端代碼
const choosePhotoFromLibrary = () => {
ImagePicker.openPicker({
width: 300,
height: 400,
cropping: true
}).then(image => {
console.log(image.path);
setImage(image.path);
});
}
Function 來電 API
const submit = async () => {
let FirstName = '';
let LastName = '';
let Age = '';
let Gender = '';
let Town = '';
let Area = '';
let Last_Time = '';
let Image_path = image;
let Description = Appearance;
FirstName = await AsyncStorage.getItem('FirstName') || 'none';
LastName = await AsyncStorage.getItem('LastName') || 'none';
Age = await AsyncStorage.getItem('Age') || 'none';
Gender = await AsyncStorage.getItem('Gender') || 'none';
Town = await AsyncStorage.getItem('Town') || 'none';
Area = await AsyncStorage.getItem('Area') || 'none';
Last_Time = await AsyncStorage.getItem('Last_Time') || 'none';
console.log(FirstName,LastName,Age,Gender,Town,Area,Last_Time,Description, Image_path);
url = 'http://192.168.1.104:3005/api/Users/AddReport/5';
try {
await fetch(url,Image_path{
method: 'post',
headers: {
'Content-Type' : 'application/json',
},
body: JSON.stringify({
user_id : 5,
firstname : FirstName,
lastname : LastName,
age : Age,
sex : Gender,
town : Town,
area : Area,
last_seen_time : Last_Time,
last_seen_appearance : Description,
image_path : Image_path,
})
});
/*await AsyncStorage.removeItem('FirstName');
await AsyncStorage.removeItem('LastName');
await AsyncStorage.removeItem('Age');
await AsyncStorage.removeItem('Gender');
await AsyncStorage.removeItem('Town');
await AsyncStorage.removeItem('Area');
await AsyncStorage.removeItem('Last_Time');*/
} catch(e) {
console.log(e)
}
}
后端 API
const storage = multer.diskStorage({
destination: './reports/images',
filename: (req, file, cb) => {
return cb(null, `${file.fieldname}_${Date.now()}${path.extname(file.originalname)}`)
}
})
const upload = multer({
storage: storage,
})
//Add Report
app.post("/api/Users/AddReport/:user_id", upload.single('report_image'),async(req, res) => {
console.log(req.file);
try {
const results = await db.query("INSERT INTO REPORT (user_id,firstname,lastname,age,sex,town,area,last_seen_time,last_seen_appearance,image_path) VALUES ($1,$2,$3,$4,$5,$6,$7,$8,$9,$10)",
[req.params.user_id,req.body.firstname,req.body.lastname,req.body.age,req.body.sex,req.body.town,req.body.area,req.body.last_seen_time,req.body.last_seen_appearance,req.file.path]);
console.log(results);
res.status(201).json({
status: "success",
data: {
name: ["Fahad"],
email: ["fahad@gmail.com"],
password: ["1111"],
},
});
}catch (err) {
console.log(err)
}
});
我不知道反應,但我熟悉使用https://www.npmjs.com/package/multer 。 當您上傳文件時,您需要使用multipart/form-data
發送它,因為multer
不會處理任何不是 multipart 的表單。
編輯:一些示例代碼
后端
const storageLocal = multer.diskStorage({
destination(req, file, cb) {
cb(null, './src/uploads');
},
filename(req, file, cb) {
cb(null, `${Date.now().toString()}_${file.originalname}`);
}
});
const uploadLocal = multer({ storage: storageLocal });
前端
function inputDashboard(e){
e.preventDefault();
var formData = new FormData();
var xhr = new XMLHttpRequest();
let storage= e.target.storage.value;
let file = e.target.file.files[0];
formData.append('file', file);
xhr.open('POST', `${uriApi}/${storage}`);
xhr.onload = function(){
var result = JSON.parse(xhr.responseText);
if(xhr.readyState==4&&xhr.status=='200'){
alert('Done Update');
location.replace(uriDash);
}
else{
alert('Something is wrong');
}
};
xhr.send(formData);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.