通过 React 中的 FilePond 组件提交到 servlet（后端）后无法可视化 pdf 文件

Question

我有一个带有通过 FilePond 库上传文档表单的前端 React 应用程序，作为后端，我使用 Java 将 pdf 文档保存到我的本地文件。

我有点卡住了，因为我有 pdf 文件，我可以看到内容（在 Notepad/Code 中）但是当我用 Adobe/Microsoft Edge 打开它时，所有页面都是空白的，我不知道不知道为什么。

在 FilePond 文档中，它没有指定默认编码，我不知道有什么方法可以在请求 (req) 中查看编码。此外，如果无法通过这种方式发送文件，请使用 getFileEncodeBase64String .非常感谢您的任何想法。

React 中的代码：

const APIClient = axios.create({
    // baseURL: 'https://postman-echo.com',
    baseURL: Config.faqServerUrl,      

    timeout: Config.timeout,            
    headers: {
        'Accept': 'application/json;charset=UTF-8',
        'Content-Type': 'application/json;charset=UTF-8'
    }
});

调用后端：

function processFile(fieldName, file, metadata, load, error, progress, abort, setFileName) {
    const formData = new FormData();
    let feedbackWS = null;
    formData.append('file', file, file.name);
   try{
    feedbackWS = APIClient.post('/upload-document',formData, {     
        onUploadProgress: (e) => {
            // updating progress indicator
            progress(e.lengthComputable, e.loaded, e.total);
        }
    }).then((response) => {
        load(response.data);
        setFileName(response.data);
      })
      .catch((error) => {
        console.error(error);
      });
    } catch (error) {
        console.log(error);
    }
}

FilePond 组件：

<FilePond
                       server={{
                            process:(fieldName, file, metadata, load, error, progress, abort) => {
                            processFile(fieldName, file, metadata, load, error, progress, abort);
                            } 
                        }}
                        oninit={() => handleInit()}

                        // callback onupdatefiles- a file has been added or removed, receives a list of file items
                         onupdatefiles={(fileItems) => {
                        // Set current file objects to this.state
                             setFile(fileItems.map(fileItem => fileItem.file));
                        }}
                        instantUpload={true}
                        onprocessfile={(error, file)=>{
                            console.log('PROCESSED', file, 'SERVER_ID', file.serverId);
                        //    console.log('ERROR PROCESSED', error);
                        }}

                        onaddfile={(error, file)=>{
                            console.log('PROCESSED', file, 'SERVER_ID', file.serverId);
                         //   console.log('ERROR PROCESSED', error);
                        }}
                    />

Java 代码：

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("encoding" + req.getCharacterEncoding()); // it is null

nom_upload_faq = "test.pdf";


            String repertoireFaqTemp = "/temp/"; 
            String pathComplet = repertoireFaqTemp + nom_upload_faq;

            File fichierTemp = null;
            try {

                fichierTemp = new File(pathComplet);

                if (fichierTemp.exists() && fichierTemp.isFile()) {
                    fichierTemp.delete();
                }

                if (fichierTemp.createNewFile()) {
                    fichierTemp.setReadable(true, false);
                    fichierTemp.setWritable(true, false);
                    fichierTemp.setExecutable(true, false);
                    fichierTemp.deleteOnExit();
                } else {
                    System.out.println("Impossible d'arriver ici on l'a déjà supprimer avant");
                }
            } catch (IOException e) {
                System.out.println("An error occurred.");
                e.printStackTrace();
            }
            //byte[] fileAsBytes = getArrayFromInputStream(req.getInputStream());
            byte[] fileAsBytes = null;
            try {
                List<FileItem> items = new ServletFileUpload(new DiskFileItemFactory()).parseRequest(req);
                for (FileItem item: items) {
                    if(!item.isFormField()) {       // it'a file
                        fileAsBytes = getArrayFromInputStream(item.getInputStream());
                    }
                }
            } catch (FileUploadException e1) {
                // TODO Auto-generated catch block
                e1.printStackTrace();
            }
            try (BufferedOutputStream output = new BufferedOutputStream(new FileOutputStream(fichierTemp))) {

                output.write(fileAsBytes);
                output.flush();
                output.close();
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    private static byte[] getArrayFromInputStream(InputStream inputStream) throws IOException {
        byte[] bytes = null;
        byte[] buffer = new byte[1024];
        try (BufferedInputStream is = new BufferedInputStream(inputStream)) {
            ByteArrayOutputStream bos = new ByteArrayOutputStream();
            int length;
            while ((length = is.read(buffer)) > -1) {
                bos.write(buffer, 0, length);
            }
            bos.flush();
            bytes = bos.toByteArray();
        } catch (Exception e) {
            System.out.println("toto");
        }
        return bytes;
    }

编辑：谢谢 Rik 确实调用了 formData.append('file', file, file.name);是正确的但编码仍然存在相同的问题（添加 ? 符号）这就是为什么我认为这可能是将 pdf 文件作为 base64 发送的唯一可能性我已经安装了插件但是因为它'异步我无法调用方法 getFileEncodeBase64String 并且在 servlet 中，请求流不是正确的，正如您在图片中看到的那样。在这里你可以看到鼠标选择之前的顺序我有一个 8 和 ?

Answer 1

您不必对文件进行编码

formData.append('file', file.getFileEncodeBase64String(), file.name);

你可以这样做：

formData.append('file', file, file.name);

并且您的浏览器将 post 一个文件对象，您可以像使用表单 post 处理任何其他文件一样处理该文件对象。参见：https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

通过 React 中的 FilePond 组件提交到 servlet（后端）后无法可视化 pdf 文件

Unable to visualize pdf file after submitting via FilePond component in React to a servlet(backend)

java

servlets

reactjs

java-ee-8

filepond