Размещать данные из нескольких частей / форм с помощью fetch - PullRequest
Новая
       41

Размещать данные из нескольких частей / форм с помощью fetch

0 голосов
/ 27 апреля 2020

Мне удалось использовать Почтальон, чтобы разместить несколько изображений в моем бэкэнде. Но я не могу понять, как сделать то же самое из моего интерфейса. Как мне разместить несколько файлов? Проблема в том, что я преобразовал e.target.files в массив или пропустил что-то еще? 

import React from "react";
import { FileList } from "./file-list.component";

export const FileUpload = ({ files, setFiles }) => {

  const fileHandler = (e) => {
    const fileArray = Array.from(e.target.files);
    fileArray.map((f) => (f["id"] = Math.random() * Math.pow(10, 16)));
    setFiles(fileArray);
  };

  const postImages =  () => {
    const url = "http://localhost:8080/api/upload"
    const formData = new FormData()
    //files.map(f => formData.append(f.name,f))
    formData.append('files', files)
    formData.append('folder', 'test2')

    fetch(url, 
      {
        method:'POST',
        body: formData
    })
  };

  return (
    <div className="file-upload">
      <span className="button" style={{ padding: "0px 4px 4px 0px" }}>
        <i className="material-icons">attachment</i>Välj Bilder
      </span>
      <input
        type="file"
        multiple
        className="multiple-files"
        aria-label="Multiple file upload"
        accept="image/*"
        onChange={fileHandler}
      />
      {files.length > 0 && (
        <div>
        <div className="toolbar">
          <div className="button-group">
            <button className="button-sub" onClick={postImages}>
              Ladda upp Bilder
            </button>
          </div>
        </div>
        <FileList files={files}/>
        </div>
      )}
    </div>
  );
};
...