如何使用 multer 從 expo-image-picker 上傳 react-native 圖像到 Express.js 服務器

Question

就像標題說的那樣，我正在嘗試將從我的 react-native 應用程序上的 expo-image-picker 拍攝的圖像上傳到使用 multer 作為中間件的 express.js 服務器。 我的圖片上傳代碼如下所示：

var data = new FormData();
  data.append('image', { 
    // @ts-ignore 
    uri: listing.image.uri.replace('file://', ''),
    name: listing.title,
    type: listing.image.type,
    description: listing.desc
  })
  const uploadImage = await axios.post(`${env.apiUrl}/uploadImage`, data, {
    cancelToken
  });

使用此代碼將其發送到快遞服務器。

app.post('/uploadImage', upload.single('image'), (req, res) => {
const uploadImage = async (file) => {
  listingService.UploadImage(file)
  .then(payload => {
    return res.status(200).send(payload)
  })
  .catch(payload => {
    return res.status(500).send(payload)
  })
}

const file = req.file;
if(file && file.size < 5000000) {
  uploadImage(file);
}
else {
  res.status(500).send("could not upload file, please enter a file less than 5mb");
}})

並且快遞服務器因以下錯誤而失敗：

Request failed with status code 500
at node_modules\axios\lib\core\createError.js:16:14 in createError
at node_modules\axios\lib\core\settle.js:17:22 in settle
at node_modules\axios\lib\adapters\xhr.js:62:12 in handleLoad
at node_modules\event-target-shim\dist\event-target-shim.js:818:20 in EventTarget.prototype.dispatchEvent
at node_modules\react-native\Libraries\Network\XMLHttpRequest.js:592:4 in setReadyState
at node_modules\react-native\Libraries\Network\XMLHttpRequest.js:395:6 in __didCompleteResponse
at node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:189:10 in emit
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
at [native code]:null in callFunctionReturnFlushedQueue

我使用 post 方法的表單數據部分與 postman 一起工作，但我不確定如何格式化在 react-native 應用程序中拍攝的圖片。 非常感謝任何幫助。

Answer 1

在你的Backend

像這樣寫

const multer = require("multer");

const upload = multer({
  storage: multer.memoryStorage(),
});

app.post("/uploadImage'", upload.array("image"), async (req, res) => {
  try {
     console.log(req.file) // Here you will get the file 
     return res.status(200).send("Done);
  } catch (error) {
    res.status(500).send(error);
  }
});

在您的表單數據中

var data = new FormData();
  data.append('image', { 
    // @ts-ignore 
    uri: listing.image.uri, // Don't replace the file with ''..
    name: listing.title,
    type: listing.image.type,
  })
  data.append('description', listing.desc) // Add another key like this
  const uploadImage = await axios.post(`${env.apiUrl}/uploadImage`, data, {
    cancelToken
  });

Answer 2

不知何故，上述方法對我來說並不完全有效，我將 URI 保存為文件，使用 fs.writeFile() 和 uri.replace(/^data:image/\w+;base64,/, ""); 需要顯示圖像，否則不會