前后端交互，前端参数格式form-data

注意：文件上传，要不要存在阿里云，要不要永久保存，回显的时候 需要阿里云，用完就删除的直接给后端就行，不需要存在阿里云。

1、原生input提交

/** 提交校验 */
  onCheck = async () => {
    const { idType, defaultValue, getSubmitValue } = this.props;
    const { selectCode } = this.state;


    try {
// 方法一：
      // const formDataObject = new FormData();
      // console.log(($("#file")[0] as any).files, "所有文件")见下面截图

      // const files = ($("#file")[0] as any).files;
// 同时上传多个文件时的写法
      // for (const file of files) {
      //   formDataObject.append('files', file);
      // }
// 方法二：
      const input = document.querySelector("input[type='file']");

//const input = document.querySelector("input[type='file']");
// 等同于
//const input = document.querySelector(".input");
      const formDataObject = new FormData(); // FormData 对象获取文件数据
// 同时上传多个文件时的写法
      for (let i = 0; i < (input as any).files?.length; i++) {
        formDataObject.append("file", (input as any).files[i]);
      }


// 方法三
      const values = (await this.props.form.validateFields()) as unknown as TFarmLand;
      values.deptId = !isEmpty(selectCode) ? selectCode?.map(Number)[selectCode.length - 1] : defaultValue?.deptId as number;
      const data = new FormData();
      const formDataObject = idType === "edit" ? data : formData;
      formDataObject.append("name", values.name || "");

      
        await tFarmLandProvider.addFarmForm(formDataObject).then(async (res) => {
          if (res.code === 200) {
            this.props.getSubmitValue && this.props.getSubmitValue(true);
            message.success("新增成功！");
          }
          return;
        }).catch(err => {
          this.props.getSubmitValue && this.props.getSubmitValue(false);
          message.error(err.response?.data?.msg || "新增失败！");
          return;
        });
   

    } catch (errorInfo) {
      console.log(errorInfo, "errorInfo")
      message.warn("提交校验失败！");
      return null;
    }
      
  }


// 方法三
 /** 获取formdata */
  getBeforeUpload = (file: RcFile) => {
    console.log(file, "file")
    const data = new FormData();
    data.append("file", file);
    this.setState({
      formData: data,
    })
    return false;
  }


render() {
   
    return (
      // 方法一：
      // <div id="uploadForm">
      //   <input id="file" type="file" name="file" multiple/>
      // </div>
      // 方法二：
      //<form id="form_upload" encType="multipart/form-data">
      //  <input className="input" type="file" name="file" multiple />
      //</form>
      // 方法三：
<Form className="farm">
<Form.Item label="农田名称">
          {getFieldDecorator("name", {
            initialValue: defaultValue?.name,
          })(
            <Input
              placeholder="请输入"
            />)}
        </Form.Item>
        {<Form.Item label="农田文件上传" extra="请上传农田shp格式文件压缩包" style={{ display: idType === "edit" ? "none" : "" }}>
          {getFieldDecorator("file", {
            validateTrigger: "onSubmit",
            rules: [
              {
                required: idType === "edit" ? false : true,
                message: "文件必须上传！",
              },
              { validator: checkedUploadSuccess },
            ],
            valuePropName: "file",
            getValueFromEvent: (e: UploadChangeParam) => {
              return e.fileList;
            },
          })(<Upload
            name="file"
            multiple
            transformFile={transformFile}
            accept=".zip"
            beforeUpload={(file) => this.getBeforeUpload(file)}
            listType="picture"
          >
            <Button>点击上传</Button>
          </Upload>)}
        </Form.Item>}

      </Form>

    )
  }

 同时上传多个的时候，就会并列给2个file: binary

 所有文件打印：