以 axios 作為 formdata 上傳 static 文件

Question

我希望使用axios將 static 文件上傳到服務器，如何實現這一點：

import pdf from "./sample.pdf"

const formData = new FormData()
formData.append("file",pdf)

await axios.post("upload",formData, {headers: {'Content-Type': `multipart/form-data; 
boundary=${formData._boundary}`}})

我還嘗試使用 javascript File()構造創建新文件，如下所示： const file = new File([pdf], name + '.pdf', {type: 'application/pdf'}); 但事實證明該文件將為空且類型不受支持。

那么我怎樣才能將 static 文件轉換為 formData 任何幫助，謝謝。

Answer 1

將 pdf 轉換為 base64，然后將 append 轉換為數據。

當您導入 pdf 文件並執行 console.log 時，您將看到url （不是文件 blob/數據）。

您可以獲取 pdf 文件，然后在then塊中發出發布請求。

像這樣

import test from "./test.pdf";
import axios from "axios";

export default function App() {
  useEffect(() => {
  console.log('test', test); //<---this prints just the url
    axios.get(test).then(pdf => {
      console.log(pdf.data);//<---this prints the base64

      const formdata = new FormData();
      formdata.append("pdf", pdf.data);
      formdata.append("name", "whatever");

      axios
        .post("", formdata, {
          headers: {
            "content-type": "multipart/form-data"
          }
        })
        .then(res => {});
    });
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Answer 2

我是這樣做的：首先，我使用這個 function 將導入的文件轉換為 base64：

   const data = await axios.get(url, {responseType: 'arraybuffer'}).then((response) => 
          {
      let pdf= btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), ''));
      return `data:${response.headers['content-type'].toLowerCase()};base64,${pdf}`;
    });

然后將 base64 轉換為文件 object：

  function dataURLtoFile() {
      var arr = data.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);

      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }

      return new File([u8arr], name + '.pdf', {type: mime});
    }

最后執行 2 function 得到結果：

    const pdf = await dataURLtoFile();
    bodyFormData.append('pdf', pdf);
    await sendReport(bodyFormData);