Question

在对reactjs中的文件上传进行了一些研究之后，我遇到了Filepond，这似乎是一个不错的解决方案，并且实际上可以处理我使用Yii2（php）框架在应用程序中上传文件时所需的一切。

我已经安装了FillPond并按照https://itnext.io/uploading-files-with-react-and-filepond-f8a798308557所示的基本教程进行操作，对我来说很好。

我实际上可以从此处将文件上传到我的Yii2框架中，并成功保存它们。

现在，我希望能够与其他表单数据一起在表单中上传和提交文件。我不知道这是否可能？如果是的话，请问我该怎么做??

我也看到了裁剪和调整大小的选项，我对使用它们非常感兴趣。我如何使用此插件，因为看不到如何安装或集成它们。（我已经成功安装了预览）。

注意：我已经阅读了整个https://pqina.nl/filepond/docs/patterns/api/filepond-instance，并且看到了诸如InstantUpload之类的属性以及诸如processFile之类的函数。但是当我尝试整合它们时，它们不仅效果不佳，而且无法像我想要的那样工作

这是我的渲染代码

 render() {
    const {user} = this.props;
    return (
        <Container fluid className="music-background card">
            <Row >
                <Col md="10">
                    <br/>
                    <form onSubmit={this.handleSubmit} >
                        <Row >
                            <Col md="12">
                                <Input label="New Username"  name="username" value={info.username} onChange={this.handleChange} icon="user" group type="text" validate error="wrong" success="right"/>
                                {submitted && !info.username &&
                                    <div className="help-block">New Username is required</div>
                                }
                            </Col>
                            <Col md="12" className="music-text-center text-center">
                              <FilePond 
                                        required={true} 
                                        name={'upfile'+user.username} 
                                        instantUpload={this.state.sumitted} 
                                        allowMultiple={false} 
                                        processFile={this.state.sumitted} 
                                        //server={apiConstants.API_GENERAL_URL+'changeprofilepic?access-token='+user.auth_key}

                               />
                            </Col>
                            <Col md="12">
                                <div className="text-center">
                                    <Button type="submit" onClick={this.handleSubmit} className=" btn-primary pull-right">Submit</Button>
                                </div>
                            </Col>
                        </Row>
                    </form> 
                </Col>
            </Row>
        </Container>
    ); 
}

我的提交功能

handleSubmit(event) {
    event.preventDefault();
    this.setState({
        sumitted:true
    });
    const { dispatch } = this.props;
    //expecting to process files here
    dispatch(userActions.username(info))
}

我的Yii2 API看起来像这样

public function actionUsename(){
    $post = \yii::$app->request->post();
    $user = \Yii::$app->user->identity;
    $uploads = UploadedFile::getInstancesByName("upfile".$user->username);
    if($uploads and isset($post['username'])){

        $path = 'profile_pictures'. '/';
        $savedfiles = [];
         //FileHelper::createDirectory($path, $mode = 0775, $recursive = true);
        //remove the old profile picture
        if($user->profile_pic != NULL){
             unlink($path.$user->profile_pic);
        }
        // $uploads now contains 1 or more UploadedFile instances
        foreach ($uploads as $file){
            $file->saveAs($path.$user->username.'.'.$file->extension);
            $user->profile_pic = $user->username.'.'.$file->extension;
             chmod($path.$user->username.'.'.$file->extension, 0777);
            if($user->save()){
                $response['isCode'] = 201;
                $response['message'] = 'profile picture successfully updated';
                $response['user'] = $user;
                return $response; 

            }
            $response['isCode'] = 100;
            $response['message'] = 'No Success';
            return $response;
        }
        $response['isCode'] = 100;
        $response['message'] = 'Failed';
        return $response;
    }

}

请对此提出任何想法，我们将不胜感激。

使用带有Filepond和Php后端的reactjs上载文件

0 个答案: