簡體   English   中英

文件上傳無法與多部分表單數據 api nodejs 反應原生

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM