input = file 实现上传文件

待我称王封你为后i 2021-12-18 15:53 360阅读 0赞

使用input = file实现文件上传功能， 如果点击提交按钮，提交表单并上传选中的文件：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpd2VuZmVpMTIz_size_16_color_FFFFFF_t_70]

handleFileChange = (e) => {
          const input = e.target;
           const files = e.target.files;
           if(files && files[0]) {
               const file = files[0];
               if(file.size > 1024 * 1024 *3) {
                   fileTip.innerHTML = '文件大小不能超过3M!';
                   input.value = '';
                   return false;
               } else {
                   fileTip.innerHTML = '';
                   formData.append("file", file); 
               }
           }
        }
    
    handleSubmitBtnClick = (e) => {
            const { form } = this.props;
            e.preventDefault();
            form.validateFields((err, values) => {
                if(!fileInput.value) {
                    fileTip.innerHTML = '请选择您要上传的简历';
                }
                if(!err) {
                    if(!fileInput.value) {
                        return;
                    }
                    Object.keys(values).forEach((key) => {
                        formData.append(key, values[key]);
                    });
                    axios.post('http://120.77.204.211:9091/api/push', formData).then(res => {
                        if(res.data.success && res.data.retCode === 0) {
                            // 成功
                            this.setState({
                                visible: true,
                            });
                            codeTip.innerHTML="";
                        } else {
                            // 失败
                            formData = new FormData(); // 每次失败要重置formdata对象
                            formData.append('file', fileInput.files[0]);
                            codeTip.innerHTML="您输入的验证码错误";
                        }
                    })
                }
            })
        }

注意：

1.  提交包含文件的表单时，需要使用FormData对象，将要提交的字段append，作为请求的参数；
2.  可以通过fileInput.value来清空上传的文件；

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpd2VuZmVpMTIz_size_16_color_FFFFFF_t_70]: /images/20211218/59537b48600545e1aabac393e92952d8.png