文件上傳ReadAsDataUrl

我有一個關於File API和上傳JavaScript文件的問題，我應該怎麼做。文件上傳ReadAsDataUrl

我已經使用了一個非常簡單的文件上傳器，它只是從輸入文件中取出文件並向服務器發送請求，然後服務器處理這些文件並在服務器上傳一個上傳目錄中的副本文件。

但是，我試圖讓人們選擇預覽文件，然後再上傳它。所以我利用了File API，特別是new FileReader()和以下readAsDataURL()。

文件對象也如.size和.lastModifiedDate屬性的列表，我添加了readAsDataURL()輸出到我的文件對象爲方便地訪問屬性在我的角度ng-repeat()。

我的問題是，它發生在我這樣做，我可以將dataurl存儲在數據庫中，而不是上傳實際文件？我不確定使用dataurl作爲屬性直接修改文件數據是否會影響其傳輸。

最佳做法是什麼？上傳一個文件還是比較好？或者你可以直接存儲數據並輸出它，因爲這本質上就是文件本身？我應該不直接修改文件對象嗎？

謝謝。

編輯：我還應該注意到，這是一個客戶項目，希望用戶難以簡單地從應用程序上傳內容並保存並重新分發。在數據庫中保存文件是否會減輕右鍵單擊 - 保存爲行爲或不是真的？

來源

2017-06-17 Summer Developer

我認爲這取決於你將如何使用圖像。存儲網址意味着您可以確保網址始終可以訪問，即使在其他電腦或位置也是如此。如果網址來自其他網站，那麼您需要確保網站永不停機，否則會影響您的產品。根據你的描述，你有人上傳內容並讓用戶查看它，如果文件在本地計算機上，我不認爲用戶將能夠訪問該文件。至於保存情況，只要內容顯示在用戶的瀏覽器中，我認爲沒有什麼可以阻止用戶複製它。 – Surely

@我的意思是dataurl，它與另一個域的可訪問性無關，因爲我知道它是以字符串形式輸出文件的。 –

對不起，我誤解了。只要你有內容，我認爲直接存儲內容沒有問題。您可能會丟失一些其他信息，如文件名..您的服務器也需要進行一些更改以將上傳的數據轉換爲文件。 – Surely

預覽文件有多種方法。首先是你提到的帶有filereader的dataURL。但也有URL.createObjectURL這是更快

從base64解碼和編碼將需要更長的時間，它需要更多的計算，更多的CPU /內存，然後如果它將以二進制格式。

，我可以證明下面

var url = 'https://upload.wikimedia.org/wikipedia/commons/c/cc/ESC_large_ISS022_ISS022-E-11387-edit_01.JPG' 
 

 

 
fetch(url).then(res => res.blob()).then(blob => { 
 

 
    // Simulates a file as if you where to upload it throght a file input and listen for on change 
 
    var files = [blob] 
 

 
    var img = new Image 
 
    var t = performance.now() 
 
    var fr = new FileReader 
 

 
    img.onload =() => { 
 
    // show it... 
 
    // $('body').append(img) 
 

 
    var ms = performance.now() - t 
 
    document.body.innerHTML = `it took ${ms.toFixed(0)}ms to load the image with FileReader<br>` 
 

 

 
    // Now create a Object url instead of using base64 that takes time to 
 
    // 1 encode blob to base64 
 
    // 2 decode it back again from base64 to binary 
 
    var t2 = performance.now() 
 
    var img2 = new Image 
 
    img2.onload =() => { 
 
     // show it... 
 
     // $('body').append(img) 
 
     var ms2 = performance.now() - t2 
 
     document.body.innerHTML += `it took ${ms2.toFixed(0)}ms to load the image with URL.createObjectURL<br><br>` 
 
     document.body.innerHTML += `URL.createObjectURL was ${(ms - ms2).toFixed(0)}ms faster` 
 
    } 
 
    img2.src = URL.createObjectURL(files[0]) 
 

 
    } 
 
    fr.onload =() => (img.src = fr.result) 
 
    fr.readAsDataURL(files[0]) 
 

 
})

基於64位將是3倍〜較大。對於移動設備，我認爲你會想節省帶寬和電池。

但後來也有做了額外的請求的延遲，但是這其中http 2來搶救

來源

2017-08-03 07:54:44 Endless

文件上傳ReadAsDataUrl

回答

相關問題