[Reactシリーズを一緒に学ぶ--8]Reactのファイルアップロード

やっと時間を割いて自分のブログを更新し続けて、最近忙しくて大変です...このシリーズのブログについては、このような見方があるかどうかはわかりませんが、Reactでよく見られる基礎的なものはあまり多くないか、詳しくリストされていないので、シリーズのタイトルに合わないような気がします.確かに、筆者も最初はReactの基礎を最初から最後まで並べたいと思っていましたが、考えてみれば必要ありません.この基礎教程はネット上では牛の毛のように多く、繰り返し車輪を作るのではないでしょうか.だから、筆者は相対的に「辺鄙」ですが、必ず使うものを選んで共有しました.

前言

今期のテーマはReactで をどのように実現するかです.ファイルアップロードという機能は実際の開発過程で使われるところが比較的多いので、もちろん派手な解決策もたくさんありますが、万変してもその宗から離れず複雑な解決策も最も基礎的な技術から離れられないので、筆者はファイルアップロードというブロックを詳しく整理し、demoをして参考にして勉強しました.

ファイルアップロードソリューション

現在比較的主流の解決策は、form 、fetch( axios)、form +fetchで実現されている.2位については,筆者は の原則に基づいてaxiosモジュールを使用しなかった.では、次は一つ一つ分かち合います.

ファイルアップロードソリューション--formフォーム

フォームコンポーネントを利用したファイルアップロードは、遠い昔から使われていた方法で、しかも本当に衰えず、すごいです.formフォームのenctypeプロパティを使用して、フォームがコミットされたオブジェクトをマルチメディアリソースに設定し、inuput:fileを使用してファイルアップロードの機能を実現します.例は次のとおりです.

import React, {Component} from 'react'

class FormUploadOnly extends Component {
    render() {
        return (
            

                

                    
                    
                
            
        )
    }
}

export default FormUploadOnly;

このsolutionは比較的便利で効果的で、 もあります.結局、私たちがアップロードしたファイルは結局APIインタフェースにアクセスしなければなりません.しかし、この方法にはもう一つ不便な点があります.formフォームがデフォルトでジャンプしたり、ブラウザで提出したファイルのインタフェースにアクセスしたりするので、この行為は処理が面倒です.この問題は筆者がiframeを通してを推薦して解決する.

ファイルアップロードソリューション--fetch

FetchはブラウザのオリジナルAPIであり、Ajaxのようにバックグラウンドインタフェースを要求することができる.ただし、Promiseベースなので、Promiseをサポートしていないブラウザでは使用できません.おしゃべりは言わないで、どのようにfetchを通じてアップロードを実現しますか?

import React, {Component} from 'react';

class FetchUpload extends Component {
    constructor(props) {
        super(props);
        this.fileInput = React.createRef();
    }

    upload = () => {
        const data = new FormData();
        data.append('file', this.fileInput.current.files[0]);  //    input:file   name  
        fetch('http://127.0.0.1:3001/file/upload', {
            method: 'POST',
            body: data
        }).then(response => console.log(response))
    };
    render() {
        return (
            

                
                
            
        )
    }
}
export default FetchUpload;

この方法は、input:typeのデータappendをFormDataにコンパイルすることで、FormDataはデータをキー値ペアにコンパイルし、fetchによってバックグラウンド(fetchだけでなくajaxやaxiosなど)に送信することができる.しかし、この方法には致命的な問題があります.それは、ドメイン間の問題があります.この問題については、ブログの末尾に解決策を提供します.

ファイルアップロードソリューション--fetch+form

この案はタイトルと前の内容を見て、みんながどんな様子なのか推測できると思います.次のコードを直接入力します.

import React, {Component} from 'react'

class FormUpload extends Component {
    submit = (e) => {
        e.preventDefault();
        let formData = new FormData(e.target);
        fetch('http://127.0.0.1:3001/file/upload', {
            method: 'POST',
            body: formData //   input:file name             
        }).then(response => console.log(response))
    };

    render() {
        return (
            

                

                    
                    
                
            
        )
    }
}

export default FormUpload;

総じて、この方法は第2の方法と原理的に同じであるが、取得したファイルデータはinput:typeから直接取得されるのではなく、formのコミットイベントから取得されるので、他には何の変化もないので、ドメイン間の問題にも遭遇する.

バックグラウンド構成

このブログのdemoバックグラウンドはexpressで書かれているので、 でも でもNodeモジュールベースです.

ドメイン間管理

筆者がよく使うノードサービスドメイン間ソリューションはサードパーティライブラリcorsです.もちろんcorsはこのサードパーティライブラリの名前だけでなく、比較的重要なW 3 C規格もあり、ブラウザのドメイン間問題を解決するのに重要な役割を果たしていますが、このブログのポイントはここにはないので余計なことはありません.

ファイルの受信と保存

express自体のrequestオブジェクトにはアップロードされたファイルオブジェクトが含まれていないため、サードパーティ製ライブラリmulterを使用する必要があります.multipart/form-data の処理と関連資源の保存の役割を担当します.
ヒント
Multierを使用してuploadミドルウェアオブジェクトを初期化するには、次のような「フラグ」を指定する必要があります.

let upload = multer({storage: storage}).single('file');

ここでの識別子はfileであり、前のコードに対応する.
および
data.append(' file ', this.fileInput.current.files[0])
これは大きな穴ではないので、みんなが使うときに注目してください.
最後に筆者が用意したdemoを奉納し、興味があればダウンロードして遊ぶことができます.もちろん、次のファイルからダウンロードするコードも含まれていますので、ついでに見てもいいです.