React / JS从源代码读取文件内容

Question

I have a react application, created via: create-react-app

I have a PDF file in my sources, which I can import into my react component, via:

import pdf from "./Sample.pdf";

After importing the above file, if in my react component's render method, if I do a:

render() {console.log(pdf, {pdf}); return ...... }

I get the proper file path printed in the console, such as:

/static/media/Sample.ab029b91.pdf {pdf: "/static/media/Sample.ab029b91.pdf"}

Now, I want to base64 encode the contents of this pdf file (to send to a different HTTP server). How do I achieve this ? I know to make a http call or adding a parameter, all I want is to read the PDF file contents and base64 encode it into a JS variable. I think that I may have to use some kind of FileReader but I am not able to figure this out. Any help ?

I cannot use any third party react component for this btw.

Answer 1

You can use url-loader -- https://github.com/webpack-contrib/url-loader . This is similar to file loader but with support for DataURL