|
圖片/文件上傳組是企業(yè)項目開發(fā)中必不可少的環(huán)節(jié)之一, 但凡涉及到用戶模塊的都會有圖片/文件上傳需求, 在很多第三方組件庫(ant desigin, element ui)中它也是基礎組件之一. 接下來筆者就來帶大家從零實現一款圖片/文件上傳組件以及擴展出更強大的上傳組件. 你將收獲
正文 作為一名前端工程師, 解決項目問題是我們的基本職責之一, 我們可以利用已掌握的知識去解決項目開發(fā)中的問題和需求, 這也是我們職業(yè)生涯必將經歷的第一個階段,即——適應期. 如果我們想繼續(xù)晉升, 我們就需要不斷的打怪升級,掌握各種技能, 這樣我們才能在未來遇到問題時采用最佳的方案高效的解決問題, 也就是第二個階段——發(fā)展期. 為了更快的進入發(fā)展期, 我們需要不斷的提升自己的技術深度和廣度, 能縱向考慮到問題的本質也能橫向的對問題提出多種解決方案, 最終選擇一種最優(yōu)方案來實現. 要實現這一點,我們需要對問題做深度思考和復盤, 接下來筆者將介紹幾種常用的圖片上傳方案,來擴展大家的廣度. 1. 常用的圖片上傳方案 從web1.0時代開始, 我們用的最多的上傳方案就是form表單, 我們只需要在form內寫好各種input(輸入型元素), 并定義好上傳的服務器地址(action)即可.形式類似如下: <div class="form-item"></div> <div class="form-item"></div> <div class="form-item"></div> <div class="form-item"></div> 在XHR技術還沒普及時, 我們大多會選擇上述方案, 唯一的缺點就是提交之后會刷新頁面, 用戶體驗不太好, 還可能造成局部數據丟失, 但仍然有解決方案, 就是form + iframe技術. 1.1 form + iframe方案 form + iframe方案的基本思路就是我們提交動作是在父頁面觸發(fā), 但是form表單指向為iframe, 這樣可以實現局部刷新, 現在有些場景仍然在使用該方案, 具體原理如下:
1.2 ajax + formData方案 在XHR盛行之后,我們可以輕松使用ajax來實現異步請求了, 對于文件上傳, 我們也可以更靈活的使用ajax和formData來實現, 逐漸脫離了對原生form表單的依賴. 我們先來看一個簡單的使用formData上傳文件的例子: let formData = new FormData();// HTML 文件類型input，由用戶選擇formData.append("userfile", fileInputElement.files[0]);let request = new XMLHttpRequest();
request.open("POST", "http://http://io./h5/form");
request.send(formData);以上短短5行代碼就實現了將文件通過formData的方式上傳給了服務器, 是不是很簡單呢? 筆者之前的文章 基于react/vue開發(fā)一個專屬于程序員的朋友圈應用就采用了該方案, 感興趣的可以學習研究一下. 如果要實現多文件上傳也非常簡單, 這里我們以axios為例, 具體實現如下: const formData = new FormData()for(let i=0; i< files.length; i++) {
formData.append(`file_${i+1}`, files[i].file)
}
axios({ method: 'post', url: '/files/upload/tx', data: formData, headers: { 'Content-Type': 'multipart/form-data'
}
});這里要注意多文件上傳要在請求的http header中設置 Content-Type 為 multipart/form-data . 當然大家還可以基于以上原理實現更符合自身業(yè)務需求的文件上傳組件, 比如預覽, 限流等. 1.3 第三方組件實現 為了更高效快速的開發(fā)業(yè)務, 我們有時候也可以選擇第三方比較成熟的方案, 比如antd的upload組件, 比如element ui的上傳組件, 這里筆者總結了幾個比較好用且強大的方案, 大家可以感受一下:
我們可以通過上述提供的第三方組件庫, 結合自己服務端的配置,就可以輕松實現強大的上傳組件了. 2. 將裁剪功能集成到圖片上傳組件 對于圖片上傳組件來說, 我們往往不能確定用戶上傳的到底是什么, 所以我們要提前約束, 比如說對圖片大小, 圖片格式, 圖片比例等進行限制以符合我們的業(yè)務標準. 圖片大小和圖片格式的限制非常好實現, 但是對于圖片比例, 這個我們不能期望用戶自己來處理, 因為這樣會極大的增加用戶使用網站的負擔, 所以我們可以提供一種功能, 讓用戶在線切圖. 如下圖所示:
import React, { useState } from 'react';import { Upload } from 'antd';import ImgCrop from 'antd-img-crop';const Demo = () => { const [fileList, setFileList] = useState([
{ uid: '-1', name: 'image.png', status: 'done', url: 'https://zos./rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
},
]); const onChange = ({ fileList: newFileList }) => {
setFileList(newFileList);
}; const onPreview = async file => { let src = file.url; if (!src) {
src = await new Promise(resolve => { const reader = new FileReader();
reader.readAsDataURL(file.originFileObj);
reader.onload = () => resolve(reader.result);
});
} const image = new Image();
image.src = src; const imgWindow = window.open(src);
imgWindow.document.write(image.outerHTML);
}; return (
{fileList.length < 5 && '+ Upload'}
);
};
ReactDOM.render(, mountNode);以上只是一個基本的裁切并上傳圖片的例子, 當然antd-img-crop還提供了更多靈活的配置來方便我們設計更靈活強大的裁切效果. 當然我們還可以使用react-cropper來實現, 它提供了更靈活的裁切控制以及裁切實時預覽功能, 如下圖所示: 3. 內容平臺/可視化平臺下的圖片自治 對于內容平臺或者可視化平臺而且, 單純的上傳圖片還不能滿足用戶的需求, 因為內容/可視化平臺更加注重圖片的選擇和使用, 對圖片要求也很高, 用戶自己上傳畢竟資源有限, 往往不能達到用戶對內容發(fā)布的需求或者可視化設計的需求, 所以往往在這類平臺中會提供圖片素材庫這一功能, 用戶可以在素材庫中搜索海量圖片以滿足自己的需求, 而往往這樣, 才更能留住用戶, 增加用戶粘性. 基于以上場景產品經理往往會提出這樣的需求: 能不能提供可選方案, 用戶既能自己上傳圖片, 也能使用我們提供的圖片庫資源呢? 這個時候有經驗的前端往往會說一句: 安排! 在設計該功能之前我們往往要先參考其他已有實現, 這里我們舉幾個例子, 如下圖所示: 以上案例中我們可以發(fā)現在用戶上傳圖片的時候都會提供兩個可選選項, 一個是本地上傳, 一個是直接在圖片庫中選擇, 所以我們的方案也類似, 可以統(tǒng)一將圖片庫封裝到文件上傳組件中作為通用功能, 也可以組合式封裝, 各自可以獨立使用也可以組合使用. 對于H5-Dooring對圖片庫的封裝, 使用了將其作為通用服務來實現, 也就是但凡使用了上傳組件,一定會出現可選的從圖片庫選擇按鈕. 實現方案也很簡單, 就是在upload組件中擴展一層, 使用Modal+Tab來做圖片選擇的界面, 當選擇完成后將圖片的地址手動設置到upload組件中即可. 代碼如下: handleImgSelected= () => { const fileList = [
{
uid: uuid(8, 16),
name: 'h5-dooring圖片庫',
status: 'done',
url: this.state.curSelectedImg,
},
]; this.props.onChange && this.props.onChange(fileList); this.setState({ fileList, wallModalVisible: false });
};這里用了antd的form組件的受控模式. 4. 圖片上傳組件擴展 上面介紹的方案對于基本使用場景完全夠用了, 但是如果是內容網站或者可視化搭建平臺, 由于我們的配置可能會隨時分發(fā)到公網, 這就會涉及到內容安全的問題, 如果一旦用戶配置了違法的圖片信息, 那么對于平臺提供上可能會受到牽連, 所以我們還需要提供一套完善的審核機制, 比如用戶配置好或者發(fā)布好內容后, 需要進過審核才能正式發(fā)布到線上, 但是完全依賴人工審核效率又比較低, 所以這個時候我們就需求找到機器自動化審核方案了. 比如阿里云和騰訊云等都提供了圖片鑒別等服務, 我們可以將這些服務集成到我們的組件中, 來實現真正的業(yè)務自治能力, 這樣才能更安全的進行企業(yè)化經營和開發(fā). 還有一個需求就是用戶對于上傳的圖片有編輯需求, 我們還可以提供對圖片的在線編輯功能, 類似于如下方案:
5. 總結 以上教程筆者已經集成到H5-Dooring中，對于一些更復雜的交互功能，通過合理的設計也是可以實現的，大家可以自行探索研究。 |
|
|
來自： 千鋒Python學堂 > 《Python基礎教程分享》
