[英]Nodejs: Unirest: How to upload file with multipart/form-data
[英]file upload not working in react native with multipart form data api nodejs
我正在嘗試使用 nodejs multipart api 使用 react native 上傳圖像文件,但該文件未從 FE 發送。 如果我控制台 req.files 它在服務器端未定義。 這是我的反應本機代碼:
var options = {
title: 'Select Image',
storageOptions: {
skipBackup: true,
path: 'images'
}
};
ImagePicker.showImagePicker(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
} else {
console.log('User selected a file form camera or gallery', response);
const data = new FormData();
data.append('name', 'avatar');
data.append('file', {
uri: response.uri,
type: response.type,
name: response.fileName
});
const config = {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'multipart/form-data',
},
body: data,
};
fetch("http://myapi.com/api/v1/user", config)
.then((checkStatusAndGetJSONResponse) => {
console.log(checkStatusAndGetJSONResponse);
}).catch((err) => { console.log(err) });
}
}
)
和 Nodejs 代碼:
const storage = multer.memoryStorage({
destination:(req, file, callback) => {
callback(null, '')
}
});
const upload = multer({ storage: storage }).array('file');
upload(req,res,(err) => {
if(err) {
console.log('ERROR: ',err);
return res.end("Error uploading file.");
}else{
console.log('REQUEST: ',req.files);
}
});
我無法上傳帶有某些用戶數據的圖像,請告訴我這里做錯了什么,謝謝
當您在正文中發送表單數據時,它只會保存該表單數據。
如果要發送表單數據和其他一些數據,請嘗試將表單數據附加到另一個對象中,然后使用鍵值對將其他數據附加到同一對象中。
我創建了用戶注冊表,其中有一些輸入字段和個人資料上傳。 對於上傳,我使用了“ ngx-file-drop ”。
喜歡:-
const body = {};
body['formData'] = formValues;
body['fileData'] = this.fileDataArray;
在這個 ts 代碼如下。
dropped(files: NgxFileDropEntry[]) {
this.fileError = false;
this.files = [];
this.files = files;
for (const droppedFile of files) {
// Is it a file?
if (droppedFile.fileEntry.isFile && this.isFileAllowed(droppedFile.fileEntry.name)) {
this.filesArray.push(droppedFile);
const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
const formData: FormData = new FormData();
fileEntry.file((file: File) => {
});
fileEntry.file((file: File) => {
this.dropFilePath.push(droppedFile.relativePath);
// append form data
formData.append('upload', file, droppedFile.relativePath);
this.dropFile.push(file);
this.dropFileFlag = true;
});
} else {
// It was a directory (empty directories are added, otherwise only files)
const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry;
this.dropFilePath = [];
this.dropFile = [];
this.files = [];
this.toaster.error('only this file are allowed : [".jpg", ".jpeg",".gif",".png"]', 'Error', {
positionClass: 'toast-top-full-width',
});
break;
}
}
}
和 html 代碼是。
<ngx-file-drop [disabled]="isPreview ? true : null" dropZoneLabel="Drop files here" (onFileDrop)="dropped($event)" (onFileOver)="fileOver($event)"(onFileLeave)="fileLeave($event)">
<ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
<span [attr.disabled]="isPreview ? true : null" class="btn">Drop files here or</span>
<span [attr.disabled]="isPreview ? true : null" (click)="openFileSelector()" class="btn btn-link">click to upload</span>
</ng-template>
</ngx-file-drop>
在表單提交時,您可以這樣做。
onSubmit() {
this.submitted = true;
if (this.form.invalid || (this.submitted && this.fileError)) {
this.toaster.error('Invalid form data..!!', 'ERROR');
return;
}
const formData = this.form.value;
this.fileDataArray.push(formData.getAll('upload'));
console.log('this.fileDataArray-------->', this.fileDataArray);
const body = {};
body['formData'] = formData;
body['fileData'] = this.fileDataArray;
console.log('body------>', body);
// call below your api function
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.