antd表单实现用户上传文件_antd上传文件 表单提交

antd表单实现用户上传文件

注意点

1. 我们要传给后台的文件具体是一个什么东西？是一个File类型的对象，这个对象实际上是一个二进制的数据，在控制台我们看到的文件显示的是“（二进制）”而不是[object Object]，无论是原生实现还是用antd，这点都是要注意的
2. 阻止文件上传：如果我们是想要等到整一个表单都填好之后再一次性上传的话，要记得阻止文件上传
3. 我是用ts写的，js的原理是一样的

环境&&依赖

1. antd
2. axios
3. react

代码

1. 表单提交的函数实现如下：

  // 表单
  const formData = new FormData();
  
  // 表单提交
  const onFinish = (values: any) => {

	console.log('表单的所有值: ', values);

    // 清空formData的数据
    formData.delete('file');
    formData.delete('softwareName');

    // 将数据按格式推进表单中 表单中的数据是无法直接打印出来的
    formData.append('file',values.SWSql[0].originFileObj); // 这里要注意
    formData.append('softwareName',values.SWName);

    axios({
      headers:{
        'Content-Type': 'multipart/form-data', // 表单类型
        'token': token, // token 识别用户身份
      },
      method:'POST',
      url:url, // 提交地址
      data:formData, // 前面包装好的表单数据
    }).then(
      response => {
        console.log('response->',response);
      },
      error => {
        console.log('error->',error);
      }
    )
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

2. 表单代码

      <Form // 该import的东西记得import 可以先去antd的官网cv下来再对照着看
      	name="validate_other"
      	{...formItemLayout} // 表单样式配置 详见antd
      	onFinish={onFinish}
      	initialValues={{
        		'input-number': 3,
        		'checkbox-group': ['A', 'B'],
       	 	rate: 3.5,
      	}}
    	>

      <Form.Item
        name="SWName" // 这个是必须的 会作为表单项的键名
      >
        <Input placeholder="软件名" />
      </Form.Item>

      <Form.Item
        name="SWSql" // 这个也会被作为表单项的键名
        valuePropName="fileList"
        getValueFromEvent={normFile} // 这个配置也是必须的 不然会报错 但实际上我没有用到 normFile函数可以去antd找一找 我没有改动过
      >
        <Upload
          name="SW&SqlUpload" 
          listType="picture" 
          // 阻止文件的上传 待点击提交按钮的时候一次性上传
          beforeUpload={()=>{return false}}
        >
          <Button type="primary">点击上传</Button>
        </Upload>
      </Form.Item>

      <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
        <Button type="primary" htmlType="submit">
          确认发布
        </Button>
      </Form.Item>
    </Form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

分析

1. 点击提交按钮之后，触发onfinish函数，打印出表单中所有值，我们要放入表单中的值是“软件名”以及“软件”（也就是那个文件），我们要传给后台的数据是File类型的对象，看一下图片中，真正的File类型对象是我们这个项目中的“SWSql[0]”下面的originFileObj属性，而不是"SWSql[0]"。
   
2. 对比一下SWSql[0]以及SWSql[0].originFileObj，它们的结构看起来是差不多的，但是只有originFileObj是File类型的对象，SWSql[0]只是一个普通的对象。如果将SQSql[0]传给后台，我们在控制台中可以看到表单中的值是[object Object]，而如果我们将originFileObj放进表单里面，我们在控制台中看到的是“（二进制）”。