拍照上傳器

『壹』 百度怎麼拍照片上傳

1.首先打開一個瀏覽器，輸入網路一下進行搜索，然後在打開的網路頁面中點擊「網路一下」前面紅色框內的「拍照」圖標。
2. 在打開的圖片上傳界面，你可以點擊紅框內的「本地上傳圖片」按鈕，上傳你自己的圖片；也可以將你的圖片直接拖拽在有十字的「拖拽圖片到這里」，進行上傳。
3. 在點擊「本地上傳圖片」按鈕後，你可以在你電腦中找到你要上傳的圖片，選擇好，點擊下面的「打開」，等待載入完成即可成功上傳。
注意：可以先拍好照片，然後更方便上傳。

『貳』 圖片拍照上傳解決方案

微信內置瀏覽器，和一些主流瀏覽器支持調用攝像頭，但也有很多不支持調用攝像頭，僅支持相冊。
如果是WebView中，就需要客戶端支持了，android和ios的許可權也是問題。

formData 簡介

簡單的說就是：通過formData，我們可以用ajax方式來發送表單數據；以前上傳圖片是需要用form表單提交的。

我們知道瀏覽器默認顯示的文件上傳按鈕是很醜的，通常UI都會對上傳按鈕進行設計。有以下幾種方案來寫樣式。

弊端：

坑

通過ref獲取上傳按鈕。

ref方式

event.target方式

坑：

FileReader 簡介

通過 readAsDataURL() ，在讀取操作完成後，result屬性中將包含一個data:URL格式的字元串以表示所讀取文件的內容。

base64字元串

兼容性

我在safari中測試，發現是支持的。

URL.createObjectURL 簡介

通過URL.createObjectURL()創建一個URL對象，這個URL對象表示指定的file對象或Blob對象。

兼容性

張鑫旭的文章： HTML5 file API加canvas實現圖片前端JS壓縮並上傳

張鑫旭的文章： 理解DOMString、Document、FormData、Blob、File、ArrayBuffer數據類型

使用Camera API
張鑫旭