轉換文件類型數據URI - 陣營 - 懸浮窗

Question

我有麻煩FeathersJS Upload

整合React-dropzone我已經成功地實現了REST風格的上傳在您發表datauri我上傳端點。 { uri: data:image/gif;base64,........}

我的問題是當在react-dropzone中選擇一個文件並提交表單時，我看到一個File類型......看來我需要以某種方式將它轉換爲數據URI。

這應該由Dauria處理...但我認爲我的問題是在我的POST請求中，沒有設置具有正確文件格式的file屬性。我應該將File轉換爲FormData嗎？

Answer 1

這裏是從File對象做這件事：

使用圖像和的FileReader讓您得到寬度，高度和BASE64數據：

onDrop = (acceptedFiles, rejectedFiles) => { 
 
    const file = acceptedFiles.find(f => f) 
 
    const i = new Image() 
 

 
    i.onload =() => { 
 
    let reader = new FileReader() 
 
    reader.readAsDataURL(file) 
 
    reader.onload =() => { 
 
     console.log({ 
 
     src: file.preview, 
 
     width: i.width, 
 
     height: i.height, 
 
     data: reader.result 
 
     }) 
 
    } 
 
    } 
 
    
 
    i.src = file.preview 
 
}