文件没有在reactjs中上载到服务器。

Question

嗨，我试图上传一个文件与其他形式的数据，在那里我有一些姓名电子邮件和电话号码字段，所有其他细节保存，但图像不是上传，如果我使用邮递员，我可以上传图像也与其他细节。下面是我关于句柄更改的代码：

const handleChange = (event) => {
    setFile(event.target.files[0]);
    
  };

关于提交按钮：

 const onSubmit = async (data) => {
    console.log(file)
    if (isAddMode) {
      const formData = new FormData();
      formData.append(
        "Upload",
        file,
        file.name
      );
      formData.append("Name", data.Name);
      formData.append("Email", data.Email);
      formData.append("Mobile", data.Mobile);
      formData.append("StartdateofExclusivity", data.StartdateofExclusivity);
      formData.append("AddressLine1", data.AddressLine1);
      formData.append("AddressLine2", data.AddressLine2);
      formData.append("City", data.City);
      formData.append("State", data.State);
      formData.append("Country", data.Country);
      formData.append("Zipcode", data.Zipcode);
      formData.append("Availability", data.Availability);
      formData.append("Qualification", data.Qualification);
      formData.append("Experience", data.Experience);
      formData.append("Jobtype", data.Jobtype);
      formData.append("Role", data.Role);
     const saveCandInfo = await saveCandidate(formData);
      if (saveCandInfo?.data?.status === "successfully created") {
        navigate("/candidates");
      }
    } else {
      const editCandidate = await updateCandidate(id, data);
      if (editCandidate?.data?.status === "success") {
        navigate("/candidates");
      }
    }
    
  };

并在服务中：

 export const saveCandidate = async (data) => {
      console.log(data)
        try {
          const saveCandidate = await axios.post(`${url}/hhc/createCandidate`, data, {headers:{"Content-Type": "multipart/form-data"}});
          return saveCandidate;
        } catch (error) {}
      };

联署材料X：

<form onSubmit={handleSubmit(onSubmit)}>
        <div className="contact-border">
          <div className="mb-1">
            <div className="d-flex flex-row my-2">
              <div className="col-md-3 form-floating">
                <input
                  type="text"
                  className="form-control"
                  id="floatingInputValue"
                  placeholder="Name"
                  name="Name"
                  {...register("Name", { required: true })}
                />
                <label for="floatingInputValue">
                  Name<span className="mandatory">*</span>
                </label>
                {errors.Name?.type === "required" && (
                  <p role="alert" className="mandatory">
                    Name is required
                  </p>
                )}
              </div>
              <div className="col-md-3 mx-3 form-floating">
                <input
                  type="text"
                  className="form-control"
                  id="floatingInputValue"
                  placeholder="Email"
                  {...register("Email", { required: true })}
                />
                <label for="floatingInputValue">
                  Email<span className="mandatory">*</span>
                </label>
                {errors.Name?.type === "required" && (
                  <p role="alert" className="mandatory">
                    Email is required
                  </p>
                )}
              </div>
            </div>

            <div className="d-flex flex-row my-2">
              <div className="col-md-3 form-floating">
                <input
                  type="text"
                  className="form-control"
                  id="floatingInputValue"
                  placeholder="Mobile"
                  {...register("Mobile", { required: true })}
                />
                <label for="floatingInputValue">
                  Mobile<span className="mandatory">*</span>
                </label>
              </div>
              <div className="col-md-3 mx-3 form-floating">
                <input
                  type="text"
                  className="form-control"
                  id="floatingInputValue"
                  placeholder="Address Line 1"
                  {...register("AddressLine1", { required: true })}
                />
                <label for="floatingInputValue">
                  Address Line 1<span className="mandatory">*</span>
                </label>
              </div>
              <div className="col-md-2 form-floating">
                <input
                  type="text"
                  className="form-control"
                  id="floatingInputValue"
                  placeholder="Address Line 2"
                  {...register("AddressLine2")}
                />
                <label for="floatingInputValue">Address Line 2</label>
              </div>
            </div>

            <div className="d-flex flex-row my-2">
              <div className="col-md-3 form-floating">
                <input
                  type="text"
                  className="form-control"
                  id="floatingInputValue"
                  placeholder="City"
                  {...register("City", { required: true })}
                />
                <label for="floatingInputValue">
                  City<span className="mandatory">*</span>
                </label>
              </div>
              <div className="col-md-3 mx-3 form-floating">
                <input
                  type="text"
                  className="form-control"
                  id="floatingInputValue"
                  placeholder="State"
                  {...register("State", { required: true })}
                />
                <label for="floatingInputValue">
                  State<span className="mandatory">*</span>
                </label>
              </div>
              <div className="col-md-2 form-floating">
                <input
                  type="text"
                  className="form-control"
                  id="floatingInputValue"
                  placeholder="Country"
                  {...register("Country", { required: true })}
                />
                <label for="floatingInputValue">
                  Country<span className="mandatory">*</span>
                </label>
              </div>
            </div>

            <div className="d-flex flex-row my-2">
              <div className="col-md-3 form-floating">
                <input
                  type="number"
                  className="form-control"
                  id="floatingInputValue"
                  placeholder="ZipCode"
                  {...register("Zipcode", { required: true })}
                />
                <label for="floatingInputValue">
                  ZipCode<span className="mandatory">*</span>
                </label>
              </div>
              <div className="col-md-3 mx-3 form-floating">
                <select
                  className="form-select"
                  aria-label="Default select example"
                  {...register("Availability", { required: true })}
                >
                  <option value="">All</option>
                  <option
                    value="active"
                    selected={
                      candidateDetails?.results?.Availability === "active"
                        ? "selected"
                        : ""
                    }
                  >
                    Active
                  </option>
                  <option
                    value="Inactive"
                    selected={
                      candidateDetails?.results?.Availability === "Inactive"
                        ? "selected"
                        : ""
                    }
                  >
                    In Active
                  </option>
                </select>
                <label for="floatingInputValue">
                  Availability<span className="mandatory">*</span>
                </label>
              </div>
            </div>

            <div className="job-prefer">Job Type preferred</div>

            <div className="d-flex flex-row my-2">
              <div className="col-md-3 form-floating">
                <input
                  type="text"
                  className="form-control"
                  id="floatingInputValue"
                  placeholder="Role"
                  {...register("Role")}
                />
                <label for="floatingInputValue">Role</label>
              </div>
              <div className="col-md-3 mx-3 form-floating">
                <select
                  className="form-select"
                  aria-label="Default select example"
                  {...register("Jobtype")}
                  defaultValue={candidateDetails?.results?.Jobtype}
                >
                  <option value="">Select</option>
                  <option
                    value="full time"
                    selected={
                      candidateDetails?.results?.Jobtype === "full time"
                        ? "selected"
                        : ""
                    }
                  >
                    Full Time
                  </option>
                  <option
                    value="part time"
                    selected={
                      candidateDetails?.results?.Jobtype === "part time"
                        ? "selected"
                        : ""
                    }
                  >
                    Part Time
                  </option>
                </select>
                <label for="floatingInputValue">Job Type</label>
              </div>
              <div className="col-md-3 form-floating">
                <input
                  type="date"
                  className="form-control"
                  id="floatingInputValue"
                  {...register("StartdateofExclusivity")}
                />
                <label for="floatingInputValue">
                  Start date for Exclusivity<span className="mandatory">*</span>
                </label>
              </div>
            </div>

            <div className="education-details">Education & Experience</div>

            <div className="d-flex flex-row my-2">
              <div className="col-md-3 form-floating">
                <select
                  className="form-select"
                  aria-label="Default select example"
                  {...register("Qualification")}
                >
                  <option value="">Select</option>
                  <option
                    value="post graduate"
                    selected={
                      candidateDetails?.results?.Qualification ===
                      "post graduate"
                        ? "selected"
                        : ""
                    }
                  >
                    Post Graduate
                  </option>
                  <option
                    value="graduate"
                    selected={
                      candidateDetails?.results?.Qualification === "graduate"
                        ? "selected"
                        : ""
                    }
                  >
                    Graduate
                  </option>
                </select>
                <label for="floatingInputValue">Qualification</label>
              </div>
              <div className="col-md-3 mx-3 form-floating">
                <select
                  className="form-select"
                  aria-label="Default select example"
                  {...register("Experience")}
                >
                  <option value="">Select</option>
                  <option
                    value="2-3 years"
                    selected={
                      candidateDetails?.results?.Experience === "2-3 years"
                        ? "selected"
                        : ""
                    }
                  >
                    2-3 years
                  </option>
                  <option
                    value="3-4 years"
                    selected={
                      candidateDetails?.results?.Experience === "3-4 years"
                        ? "selected"
                        : ""
                    }
                  >
                    3-4 years
                  </option>
                </select>
                <label for="floatingInputValue">Experience</label>
              </div>
            </div>

            <div className="my-2">
              <div className="notes">Notes</div>
              <div className="d-flex flex-row">
                <div className="col-md-4 type-area">
                  <textarea
                    className="form-control"
                    id="exampleFormControlTextarea1"
                    rows="5"
                    placeholder="Type here..."
                    {...register("Notes")}
                  ></textarea>
                </div>
              </div>
            </div>

            {/* <div className="col-md-6">
              <label className="resume">Upload Resume<img src={plusCircle} alt="..." id="plus-icon"></img></label>
              <span className="resume-upload">Upload Resume</span>
              <img src={plusCircle} alt="..." id="plus-icon"></img>
              <input
                type="file"
                {...register("Upload")}
                onChange={handleChange}
              ></input>
            </div> */}
            <div className="col-md-6">
            <label className="resume">Upload Resume<img src={plusCircle} alt="..." id="plus-icon"></img></label>
            <input
                type="file"
                {...register("Upload")}
                onChange={handleChange}
              ></input>
            </div>

            <div className="format-file">
              <div className="checking-box">
                <input type="checkbox" id="check-box" />
              </div>
              <div className="checking-label">
                <label>HSC Formatted</label>
              </div>
            </div>
          </div>

          <div className="my-4">
            <div className="d-flex flex-row justify-content-between">
              <div className="col-md-3">
                <Link to={"/candidates"}>
                  <button type="button" className="cancel-btn">
                    Cancel
                  </button>
                </Link>
              </div>
              <div className="col-md-3">
                <button type="submit" className="saving-button">
                  Save
                </button>
              </div>
            </div>
          </div>
        </div>
      </form>

我的代码有什么问题请告诉我。

Answer 1

我可以想到的一个问题是，您正在手动添加{"Content-Type": "multipart/form-data"}。

const saveCandidate = await axios.post(`${url}/hhc/createCandidate`, data, {headers:{"Content-Type": "multipart/form-data"}});

您不应该这样做，因为它可以删除每次在标头和有效载荷中自动生成的重要边值。正确解析有效负载以了解文件何时结束。

​

const fd = new FormData()
fd.set('x', new Blob([123]))

const res = new Response(fd)
console.log(res.headers.get('content-type'))
res.text().then(console.log)

​

所以你应该做的

const saveCandidate = await axios.post(`${url}/hhc/createCandidate`, data);

这不关我的事，但我想你应该

• 用提取代替axios..。
• 使用必填项属性代替
• 在所有输入元素上都有一个名称字段
  • 然后使用fd = new FormData(formElement)代替手动添加每个字段