Блог

Я пытаюсь загрузить файл изображения с помощью react native, используя nodejs multipart api, но файл не отправляется из FE. Если я консольный запрос.files, он не определен на стороне сервера. Вот мой собственный код react:

        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 amp;amp; 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 amp;amp; 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
   }