Question

是否可以提交上传文件？不确定如何将这两者结合起来：现在必须首先上传文件然后更新名称或创建新名称而不提交文件。

<form ref={(input) => { this.locationForm = input }} onSubmit={this.createLocation} >
    <input ref={(input) => this.name = input} type="text" name="name" placeholder="Name" />
    <input ref={(input) => this.file = input} type="file" onChange={this.uploadFile} id="fileButton" />
</form>

和

   createLocation(event) {
        event.preventDefault();

        const store = {
            ['store']: {
                name: this.name.value,
                desc: this.desc.value
            }
        }

        this.props.setStore(store);
    }

    uploadFile(e) {
        const file = e.target.files[0];
        const storageRef = firebase.storage().ref('test/' + file.name);

        storageRef.put(file);
    }

setStore调用redux函数和更新。

Answer 1

是的，有可能，请执行以下操作。

<Input type="file" id="my-file-id" /> // no need of on change listener

然后在createLocation函数

var myFile= document.getElementById('my-file-id').files[0];
const storageRef = firebase.storage().ref('test/' + myFile.name);

storageRef.put(file);

注意：组件“输入”，我从'antd'导入，我觉得上面用jsx的“输入”组件也可以，如果没有，请执行以下操作

npm install antd // for node modules

在你的组件中

import { Input } from 'antd'

React提交表单上的Firebase存储上传

1 个答案: