使用請求/請求從瀏覽器發布文件

Question

我有一個Node.JS項目，服務器端和客戶端由webpack提供支持。 我希望將我的項目從axios / request的組合轉換為使用request ，但是我在從瀏覽器上傳文件時遇到問題。 我正在使用request-promise庫，但無論是使用request還是request-promise ，我都有同樣的問題。 我的嘗試是這樣做：

return request.post({
  uri: `${BASE_URL}/files`,
  formData: {
    token: token,
    file: {value: filedata, options: {filename: filename}}
  }
})

其中filedata是使用input標記返回的File對象，用於在用戶的計算機上查找文件。 我得到的錯誤是：

TypeError: self._form.on is not a function

這似乎是因為formData需要來自fs類的可讀流。 如何獲得正確的輸入request ？

Answer 1

在帖子請求中添加標題，這將有助於在您查找時使用流發送文件。

return request.post({
  uri: `${BASE_URL}/files`,
  formData: {
    token: token,
    file: {value: filedata, options: {filename: filename}}
  },
  headers: {'enctype': 'multipart/form-data'}
})

Answer 2

我發現這需要一個非平凡的解決方案才能最終發揮作用。 我使用FileReader將我從表單收到的File對象轉換為ArrayBuffer 。 我手動將標題設置為'multipart / form-data'，並使用multipart屬性設置我的所有內容。 最后，我需要將所有這些都包含在Promise ，因此我必須設置對象並適當地調用resolve。

return new Promise((resolve) => {
  const fr = new FileReader()
  fr.onload = (event) => {
    return request({
      uri: `${BASE_URL}/files`,
      method: 'POST',
      headers: {
        'content-type': 'multipart/form-data'
      },
      multipart: {
        chunked: false,
        data: [
          {
            'Content-Disposition': 'form-data; name="token"',
            body: token
          },
          {
            'Content-Disposition': `form-data; name="file"; `filename="${filename}"`}`,
            body: event.target.result
          }
        ]
      }
    }).then(resolve)
  }
  fr.readAsArrayBuffer(filedata)
})