Question

我创建了一个使用邮递员可以正常工作的注册 api，我在那里添加了一些值和图像，一切都正确存储，数据是图像，后来我启动了我的 React 表单并且只有文本有效，图像当前没有发送到api 我猜。

在 Node 中做 console.log() api：

Widget build(BuildContext context) => TestWidget<User>();


class TestWidget<T> extends StatefulWidget {
  final Future<List<T>> Function(T) myFunc = (_) => Future<List<T>>(null);

  @override
  _TestState<T> createState() => _TestState<T>();
}

class _TestState<U> extends State<TestWidget> {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<U>>(
        future: widget.myFunc(null),
        builder: (context, snapshot) {
          return Container();
        });
  }
}

使用 React 表单：[]
使用 Postman：一组完美运行的对象

req.files 使用 postman 输出

console.log(req.files);

这是我的反应课程：

httpService.js

{
    fieldname: 'images',
    originalname: 'Screen Shot 2021-02-22 at 17.18.41.png',
    encoding: '7bit',
    mimetype: 'image/png',
    destination: 'uploads/',
    filename: '091f77f82fb805b1ede9f23205cc578e',
    path: 'uploads/091f77f82fb805b1ede9f23205cc578e',
    size: 37052
  }

itemService.js

import axios from "axios";
import { toast } from "react-toastify";

axios.interceptors.response.use(null, (error) => {
  const expectedError =
    error.response &&
    error.response.status >= 400 &&
    error.response.status < 500;

  if (!expectedError) {
    console.log("Loggind the error: ", error);
    toast("An unexpected error ocurred.");
  }

  return Promise.reject(error);
});

export default {
  post: axios.post
};

itemForm.js

export function saveItem(item) {
  const headers = {
    'Content-Type': 'multipart/form-data',
  };
  return http.post(MY_ENDPOINT, item, headers);
}

form.jsx（扩展类）

import React from "react";

import Joi from "joi-browser";

import Form from "./common/form";
import { saveItem } from "../services/itemService";

class ItemForm extends Form {
  
  state = {
    data: { title: "", description: "", category: "", images: "" },
    categories: [],
    errors: {},
  };

  schema = {
    _id: Joi.string(),
    title: Joi.string().required().label("Title"),
    description: Joi.string().required().label("Description"),
    category: Joi.string().required().label("Category"),
    images: Joi.required().label("Image"),
  };

  doSubmit = async () => {
    console.log('form data> ', this.state.data); // This shows the correct object.
    
    let formData  = new FormData();
    formData.append('title', this.state.data.title);
    formData.append('description', this.state.data.description);
    formData.append('category', this.state.data.category);
    formData.append('images', this.state.data.images);

    try {
      await saveItem(formData);
    } catch (ex) {
    }
  };

  render() {
    return (
      <div>
        <h1>New item</h1>
        <form onSubmit={this.handleSubmit}>
          {this.renderInput("title", "Title")}
          {this.renderInput("description", "Description")}
          {this.renderSelect(
            "category",
            "title",
            "Category",
            this.state.categories
          )}
          {this.renderInputFile("images", "images", "file", false)}
          {this.renderButton("Register")}
        </form>
      </div>
    );
  }
}

export default ItemForm;

在 ReactJS 与 Postman 中发送多部分表单

0 个答案: