0

在对 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;
    }

}

请对此的任何想法将不胜感激。

4

0 回答 0