[ 一起學React系列 -- 8 ] React中的文件上傳

Travis 發布于2019-08-23 12:35 / 3745人閱讀

摘要：前言本期的主題是在中如何實現文件上傳。文件上傳解決方案目前比較主流的解決方案就是表單或者和表單來實現。文件上傳解決方案表單利用表單組件進行文件上傳是遠古時期就一直在用的方法而且還真經久不衰，厲害了。

終于抽出時間來繼續更新自己的博客，最近忙得夠嗆...
對于該系列博客不知道大家有沒有這樣的看法，對于React常見的基礎東西并沒有過多或者詳細列出，感覺有點不符合系列標題。的確，筆者一開始也想把React基礎從頭到尾列一邊，但是想想看沒這個必要，因為這種基礎教程在網上多如牛毛，再寫豈不是重復造輪子，所以筆者就挑一些相對“偏僻”但是肯定會用到的東西拿出來分享。

前言

本期的主題是在React中如何實現文件上傳。文件上傳這個功能在實際開發過程中用的地方相對較多，當然還有很多花里胡哨的解決方案，不過萬變不離其宗再復雜的解決方案也離不開最基礎的技術，所以筆者將文件上傳這一塊詳細整理了一下并且做了demo供大家參考學習。

文件上傳解決方案

目前比較主流的解決方案就是form表單、fetch(或者axios)和form表單+fetch來實現。對于第二位而言，筆者本著能用原生就用原生的原則就沒有使用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;

總的來說，這個方法和第二中方法在原理上是相同的，只是獲取的文件數據不是直接從input:type中獲取的，而是從form的提交事件中獲取的，其他的沒什么變化，所以也會遇到跨域的問題。

后臺組成

該博客的demo后臺是express寫的，所以不管是跨域管理還是接收并保存文件都是基于Node模塊。

跨域管理

筆者常用的Node服務跨域解決方案是第三方庫cors。當然cors除了是這個第三方庫的名字，也有比較重要的W3C標準，它對解決瀏覽器跨域問題起到重要的作用，不過該博文的重點不在這所以不作贅述，相關的使用方法都在文末的demo里，有興趣的朋友可以嘗試用用，真的很high!

接收并保存文件

因為express自身的request對象不包含上傳過來的文件對象，所以必須要用到第三方庫multer。負責處理multipart/form-data 類型的表單數據和保存相關資源的作用。

小提示

利用multer初始化一個upload中間件對象時候需要指定一個“標志符”，比如：

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

這里的標識符是file，對應前面代碼中的：


和
data.append("file", this.fileInput.current.files[0])

這是一個不算大的坑，所以大家使用時候多多關注。

最后筆者奉上準備好的demo，有興趣的話可以download下來耍耍。當然里面還包含了下一篇文件下載的代碼，大家可以也順帶看看。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98769.html

[ 一起學React系列 -- 9 ] React中的文件下載

摘要：本篇所說的文件下載也是基于和或者都行。的返回值是一個有意思的對象，它包含了很多方法，其中一個方法就是。通過的響應頭獲取到文件名。接下來就是對標簽的一系列操作，然后模擬點擊事件觸發下載動作。距離上次博文更新已經快一個月了，期間忙于各種事情無法脫身。今天難得閑暇 and then 就來更新啦...上篇中我們了解了下載React中如何實現文件的上傳，雖然不算什么高大上的技術但實際開發的時候...

Jacendfeng 2019-08-26 13:25 評論0 收藏0
JS框架 - 收藏集 - 掘金

摘要：現在回過頭總結，才又進一步的揭開了閉包的一層后臺管理系統解決方案前端掘金基于系列的后臺管理系統解決方案。什么是繼承大多數人使用繼承不外乎是為了獲得基于的單頁應用項目模板前端掘金小貼士本項目已升級至。關于js、jq零碎知識點 - 掘金寫在前面：本文都是我目前學到的一些比較零碎的知識點，也是相對偏一點的知識，這是第二篇。前后可能沒有太大的相關性，需要的朋友可以過來參考下，喜歡的可以點個...

wenyiweb 2019-08-20 16:27 評論0 收藏0
[ 一起學React系列 -- 10 ] i18n

摘要：假如有這么一段句子這件衣服是人民幣如果我們想將一個數字以人民幣的形式寫進去的話可以這么做最終顯示結果是這件衣服是人民幣其實它做了兩件事一個是加符號，另一個是加分隔符。同時表示人民幣，表示美元。今天來介紹一個非常international的東西。 i18n國際化(internationalization)的簡稱。之所以叫i18n，是因為字母i和n之間有18個字母，所以才叫i18n。不...

biaoxiaoduan 2019-08-23 13:51 評論0 收藏0
[ 一起學React系列 -- 12 ] React-Router4 (2)

摘要：驗證路由所謂的驗證路由其實就是該路由的外層加了一層驗證機制，有授權的用戶才能進入，反之都無法進入。一起學系列也隨著這篇的結束而告一段落了。大家一起加油最后再獻上和本篇博文有關的代碼鏈接和示例頁面時隔那么久，博主終于從睡夢中醒來開始更新博客啦！為自己的勤勞歡呼...(pia pia pia打臉)！本次我們接著上一篇博客繼續聊React-Router4。上篇我們主要了解了React-Ro...

chaos_G 2019-08-26 13:34 評論0 收藏0
[ 一起學React系列 -- 11 ] React-Router4 (1)

摘要：中的包中的包主要有三個和。的理念上面提到的理念是一切皆組件以下統一稱組件。從這點來說的確方便了不少，也迎合一切皆組件的理念。組件是中主要的組成單位，可以認為是或的路由入口。將該標示為嚴格匹配路由。的屬性追加一條。 2019年不知不覺已經過去19天了，有沒有給自己做個總結？有沒有給明年做個計劃？當然筆者已經做好了明年的工作、學習計劃；同時也包括該系列博客剩下的博文計劃，目前還剩4篇：分別...

tinysun1234 2019-08-23 14:49 評論0 收藏0