圖片上傳 - 如何獲取圖像數據的服務器端處理

Question

正確的格式我使用sharp處理在服務器端的圖像和react dropzone得到的圖像文件。當我發佈文件，從懸浮窗的服務器，我得到的BLOB出看起來像request.body的：

{ preview: 'blob:http%3A//127.0.0.1%3A3000/1451580a-b24f-478f-a9f7-338c0d790829' }

可選，之前我將數據發送到服務器，我可以使用的FileReader（或東西其他）對圖像文件做些什麼，而不是將它變成一個blob。

夏普需要：

• 含有JPEG，PNG，WebP的，GIF，SVG，TIFF緩衝區
• 原始像素的圖像數據
• 包含路徑到圖像文件中，最重要的字符串支持的格式。

我如何使用我有什麼尖銳提供支持的格式？

Answer 1

我建議嘗試稱爲Multer使Node.js的模塊，以幫助您訪問服務器上的照片文件。

https://github.com/expressjs/multer

首先，在客戶端上，你會想你的文件追加到FormData對象是這樣的：

// obtain the file from your react dropzone and save it to this file variable 
const file = dropzone.file // not sure how you do this with react dropzone 
const data = new FormData() 
data.append('photo', file) 

然後你就會發送這個FORMDATA反對你的服務器。在服務器上，您將使用Multer在您用於處理照片的路線上。

確保您NPM安裝multer，並要求其對您的服務器或路線文件。如果你發送一個文件，你將使用Muller'single'方法。如果你想做任何不同的事情，請查看API文檔。

app.post('/photos', multer().single('photo'), controller.processPhoto); 

在這個例子中的路線，你發送POST請求/照片，multer正在尋找與「光」一FORMDATA密鑰的文件，並追加，要請求對象。

然後在這個由「controller.processPhoto」的方法，你將有機會獲得的圖像作爲請求對象的屬性，在req.file。有了這個，你可以很容易地訪問很多好的信息，包括圖像緩衝區req.file.buffer，這聽起來像你需要的。 （也MIMETYPE，原來的名字等等）

這應該足以讓你開始。