Блог

Я пытаюсь создать форму ввода, форма включает строку и файл, но у меня возникла некоторая проблема, я могу отправить файл на сервер, но я не могу отправить строку на сервер, мой вопрос в том, как отправить строку и файл на сервер вместе.

Это мой клиентский код

 const [myFile, setmyFile] = useState("");

const onFileUpload = () => {
    try {
      const data = new FormData();
      const mystring = { makan: "ikan", suka: "mati" };
      data.append("tmparr", myFile);
      data.append("tmparr", mystring);
      Axios.post("http://localhost:10000/uploads", data).then((res) => {
        console.log(res.statusText);
      });
    } catch (error) {
      console.error("Error while uploading image to server", error);
    }
  };

<div>
        <h1>GeeksforGeeks</h1>
        <h3>File Upload using React!</h3>
        <div>
          <input
            type="file"
            onChange={(event) => {
              setmyFile(event.target.files[0]);
            }}
          />
          <button onClick={onFileUpload}>Upload!</button>
        </div>
      </div>
  

Это мой серверный код

 const upload = multer({ dest: "uploads/" });

app.post("/uploads", upload.any("tmparr", 20), async (req, res, next) => {
  console.log(req);
})
  

На сервере я пытаюсь console.log(req); показать, что я могу получить из запроса, и я получил возврат этого

   body: [Object: null prototype] { tmparr: '[object Object]' },
  route: Route {
    path: '/uploads',
    stack: [ [Layer], [Layer] ],
    methods: { post: true }
  },
  files: [
    {
      fieldname: 'tmparr',
      originalname: 'sertif.jpg',
      encoding: '7bit',
      mimetype: 'image/jpeg',
      destination: 'uploads/',
      filename: 'f24f5a1555e908b2c7725eab36925a0e',
      path: 'uploads\f24f5a1555e908b2c7725eab36925a0e',
      size: 208744
    }
  ],
  [Symbol(kCapture)]: false,
  [Symbol(RequestTimeout)]: undefined
  

Как вы можете видеть, я могу получить файл req.files , но строка возвращает объект body: [Object: null prototype] { tmparr: '[object Object]' },

Во-первых, для того, на mystring что вы ссылаетесь, я, кажется, тоже не вижу этого в вашем состоянии, я вижу только myFile то, как вы отправляете данные на сервер, я не могу в этом винить

Итак, теперь, как вы можете обрабатывать вещи в фоновом режиме, самый простой способ и удобный для начинающих — использовать этот другой пакет npm formidable

• Простая в использовании проверка документов: https://www.npmjs.com/package/formidable

Я пытался использовать fromidable

Это клиентский код

 const [myFile, setmyFile] = useState("");

  const onFileUpload = () => {
    try {
      const data = new FormData();
      const mystring = { makan: "ikan", suka: "mati" };
      data.append("tmparr", myFile);
      data.append("tmparr", mystring);
      Axios.post(url   "uploads", data).then((res) => {
        console.log(res);
      });
    } catch (error) {
      console.error("Error while uploading image to server", error);
    }
  };
  

Это серверный код

 app.post("/uploads", async (req, res, next) => {
  const form = formidable({ multiples: true });
  form.parse(req, (err, string, files) => {
    if (err) {
      next(err);
      return;
    }
    res.json({ string, files });
  });
});
  

Это результат, который я получил

попробуйте поместить их внутрь объекта:-

   const onFileUpload = () => {
    try {
      const fileData = new FormData();
      const mystring = { makan: "ikan", suka: "mati" };
      const data = {
        tampar: fileData.append("tmparr", myFile)
        tamparr: myString 
      }
      
      Axios.post("http://localhost:10000/uploads", data).then((res) => {
        console.log(res.statusText);
      });
    } catch (error) {
      console.error("Error while uploading image to server", error);
    }
  };