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;
}
}
これに関するアイデアは高く評価されます。