时间戳

首页 > 解决方案 > reactjs formik文件上传

reactjs - reactjs formik文件上传

问题描述

我想在 reactjs 中上传图像我正在使用 Formik，遵循https://codesandbox.io/s/lkkjpr5r7?file=/index.js:1808-1812

我的代码是：

               <Field
                className="attribute_input"
                name={this.props.fieldname}
                type="file"
                placeholder={
                    this.props.title
                }
                onChange={this.handleChange}
                   
                />

并且 handlechange 具有以下实现：

handleChange(event) {
        const reader = new FileReader();
        reader.onload = () => {
            if (reader.readyState === 2) {
                this.setState({file: reader.result})
            }
        } 
        reader.readAsDataURL(event.target.files[0]);
        console.log(this.props.fieldname);
        this.props.sfv("image1", event.currentTarget.files[0]);
    }

面临错误：

未能在“HTMLInputElement”上设置“值”属性：此输入元素接受文件名，该文件名只能以编程方式设置为空字符串。

标签： reactjsformik

解决方案

问题是 <Field 标签。Formik 没有提供原生文件标签，所以我们需要使用 <input 标签而不是它的基本字段标签。在演示中，他们也在使用这个，但我错过了这个东西。标签应如下所示：

        <input
        className="attribute_input"
        name={this.props.fieldname}
        type="file"
        onChange={this.handleChange}
        />

推荐阅读