增加圖片發(fā)送功能

一、需求

（1）點擊圖片 Icon，出現(xiàn)文件上傳框，選擇圖片；
（2）驗證圖片類型及大小，本地預(yù)覽的同時上傳到服務(wù)器；
（3）上傳完之后進行發(fā)送，同消息發(fā)送（本文不涉及）。

二、DOM節(jié)點預(yù)備

• 圖片Icon（展示，用于點擊）
• 文件上傳標簽 <input type="file" />（隱藏）

可選項：

• form 表單（隱藏）：如果不使用 formData，可通過表單上傳
• iframe（隱藏）：如果不使用 ajax，可用于存放圖片上傳之后返回的數(shù)據(jù)（被稱為隱藏 iframe 模擬 Ajax 跨域上傳，注意 form 的 target 要寫 iframe 的 name 屬性）

render() {
    return (
        <div>
            <span className="picture" onClick={this.handlePicClick}></span>
            <iframe name="post_frame" style={{display: 'none'}} onLoad={this.loadIframe}></iframe>
            <form action="/upload.action" method="post" target="post_frame" encType="multipart/form-data" ref={ node => this.imgForm= node }>
                <input type="file" 
                    name="imgUpload" 
                    accept="image/gif, image/jpeg, image/png, image/bmp"
                    onChange={this.handleImgChange} 
                    style={{display: 'none'}} 
                    ref={node => this.imgUploader = node} />
            </form>
        </div>
    );
}

三、操作實現(xiàn)

1. 點擊 圖片 Icon，觸發(fā)文件上傳標簽，打開文件上傳框：

handlePicClick = () => {
    this.imgUploader.click();  // 相當(dāng)于點擊<input type="file />，調(diào)出文件框
}

2. 監(jiān)聽 <input type="file" /> 的 onchange 事件，獲取上傳的文件內(nèi)容：

handleImgChange(e) {
    const { file, url } = this.getFile(e);  // 獲取文件內(nèi)容

    if (this.imgValidator(file)) {  // 驗證文件內(nèi)容
        this.uploadImg(file);  // 本地預(yù)覽的同時上傳文件
    }

    // 允許多次上傳同一張圖片
    e.target.value = '';
}

【注意】：如果沒有最后一行代碼，那么在重復(fù)上傳同一張圖片時，不會觸發(fā) onchange 事件，因此需要最后一行代碼來保證能夠允許多次上傳同一張圖片，解決方案來自：圖片上傳以及允許連續(xù)上傳同一圖片

3. 獲取文件內(nèi)容（路徑，名稱，類型，大?。?/h5>

getFile(e) {
    let fileEle = e.target;
    let fileObj = null;
    let filePath = '';

    if (fileEle.files) {
        fileObj = fileEle.files[0];
        filePath = window.URL.createObjectURL(fileObj);
    } else {
        // 通過網(wǎng)搜各種兼容 IE9 的方法，嘗試之后，沒效果，果斷放棄了。。。
        // 深深地體會到了兼容 IE9 的絕望(╥╯^╰╥)
        try {
            fileEle.select();
            fileEle.blur();
            filePath = document.selection.createRange().text;
            // filePath = fileEle.value;  // 只在本地有效
            let fileSystem = new ActiveXObject("Scripting.FileSystemObject");

            if(fileSystem.FileExists(filePath)){
                fileObj = fileSystem.GetFile(filePath);
                /* console.info("文件類型:" + fileObj.type);
                console.info("文件名稱:" + fileObj.name);
                console.info("文件大小:" + fileObj.size); */
            }
        } catch (e) {
            console.log('GetFile Error:', e);
        }
    }

    return {
        file: fileObj,
        url: filePath
    };
}

非 IE9 下可以通過 e.target.files 來獲取到選擇的圖片內(nèi)容，然后生成相應(yīng)的文件路徑；而 IE9 獲取不到 e.target.files 對象，需要特殊兼容下（誰曾想兼容之路漫漫，爬過一座山，又遇一道坎???????）。

（1）對象 URL：性能比較好

對象 URL 也被稱為 blob URL，指的是引用保存在 File 或 Blob 中數(shù)據(jù)的 URL。通過 window.URL.createObjectURL(file) 方法創(chuàng)建一個對象 URL，它的返回值是一個字符串，指向一塊內(nèi)存地址。因為這個字符串是 URL，因此能夠在 DOM 中（如img標簽）進行使用。

使用對象 URL 的好處是可以不必把文件內(nèi)容讀取到 JavaScript 中而直接引用文件內(nèi)容。頁面卸載時會自動釋放對象 URL 占用的內(nèi)存。

fileObj 和 filePath

（2）FileReader

FileReader 實現(xiàn)的是一種異步文件讀取機制?？梢园?FileReader 想象成 XMLHttpRequest，區(qū)別只是它讀取的是文件系統(tǒng)，而不是遠程服務(wù)器。為了讀取文件中的數(shù)據(jù)，F(xiàn)ileReader 提供了4個方法，這里需要用到的方法如下：

• readAsDataURL(file)：讀取文件并將文件以數(shù)據(jù) URI 的形式保存在 result 屬性中

由于讀取過程是異步的，F(xiàn)ileReader 也提供了幾個事件，包括：progress、error、load。

【測試代碼】：

let file = e.target.files[0];
let reader  = new FileReader();
reader.onload = (e) => {
    let url = e.target.reasult;
    // 可以構(gòu)造img對象：
    // let img = `<img src="${url}" className="upload-img" />`;
};
// 讀取file對象并存放為data: URL格式的字符串
reader.readAsDataURL(file);

e.target.result

話說一張圖片轉(zhuǎn)成 base64 還是挺大的，不建議進行ws傳輸。
FileReader 的其它方法、 progress的信息（屬性） 和 error 事件的錯誤碼，具體請參考《JavaScript高級程序設(shè)計》。

（3）IE9：在假設(shè)能獲取到 input 中 text 的情況下（本地測試可以，聯(lián)調(diào)環(huán)境各種問題），so，還是別在這上面浪費時間了╮(╯﹏╰）╭，跟產(chǎn)品求個繞，果斷放棄 IE9

文件內(nèi)容

4. 驗證文件內(nèi)容

通過步驟 3，我們可以知道上傳的圖片文件所包含的信息，包括 路徑（url）、名稱（name）、類型（type）、大小（size），因此可以對這幾項進行業(yè)務(wù)上的驗證。

5. 上傳至服務(wù)器

（1）form 表單上傳

在不使用 formData 的情況下，form 表單上傳直接調(diào)用 submit 方法即可：

this.imgForm.submit();

當(dāng)數(shù)據(jù)返回之后，就是 iframe 派上用場的時候啦：

// 上傳圖片后返回結(jié)果處理
loadIframe(e) {
    let imgInfo = this.localInfo; // 本地圖片信息
    let isUpload;

    try {
        let response = e.target.contentDocument.body.textContent;
        if (!response) {
            isUpload = false;   // 上傳失敗
        } else {
            // 處理返回結(jié)果
            // 如果上傳成功，則獲取新的 imgInfo
        }
        this.handleUploadRes(isUpload, imgInfo);  // 處理圖片結(jié)果
    } catch(e) {
        console.log('loadIframe Error:', e);    // iframe內(nèi)容讀取受限，如瀏覽器兼容性問題
    }
}

（2） formData 上傳（IE9以下不支持）

創(chuàng)建 formData：

// 方法一：直接將 form 對象裝載到 formData 中
let fd = new FormData(this.imgFrom);

// 方法二：選擇性添加信息
let fd = new FormData();
fd.append('uploadImg', file);

發(fā)送 Ajax：

// 以下代碼來自參考文章：[上傳圖片攻略全解]，見文末參考
let xhr = new XMLHttpRequest();
xhr.open('POST','/upload.action');
xhr.onreadystatechange = function(){};
xhr.send(fd);

// 獲取上傳的進度
xhr.upload.onprogress = function(e){
    var loaded = e.loaded;//已經(jīng)上傳大小情況
    var tot = e.total;  //附件總大小
    var per = Math.floor(100*loaded/tot);  //已經(jīng)上傳的百分比  
}

// 或者使用框架的話：
/*ajax({
    url: '/upload.action',
    data: fd,
    type: 'post',
    success: () => {}
});*/

四、補充

1. 考慮到真實的業(yè)務(wù)場景中是需要將圖片進行發(fā)送的，這時候需要考慮到的情況是：如果圖片過大，上傳需要一定的時間，這時候就不能阻塞后續(xù)文本消息的發(fā)送。

上傳不阻塞消息發(fā)送

2. 論寫 try...catch(e)... 的重要性，在Chrome瀏覽器影響不大，但是一旦調(diào)試 IE 的時候，就會明白這個語句有多重要了，它可以在產(chǎn)生錯誤的時候不讓 IE 進入調(diào)試狀態(tài)，也能直接在控制臺看到錯誤結(jié)果，可以大大提高效率。

至此，聊天室的又一道難題解決啦~蟹蟹閱讀喲！ヾ(??▽?)ノ

五、參考

• 利用html5 file api讀取本地文件（如圖片、PDF等）
• 上傳圖片攻略全解
• 通過jQuery Ajax使用FormData對象上傳文件
• 兩種方式j(luò)avascript實現(xiàn)圖片預(yù)覽
• 兩種文件上傳的實現(xiàn)－Ajax和form+iframe
• 原生js實現(xiàn)圖片上傳、預(yù)覽、壓縮
• Form表單和Iframe實現(xiàn)文件上傳,頁面不跳轉(zhuǎn)