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

Question

[我有一个前端React应用程序，它具有通过FilePond库上传文件的形式，作为后端，我使用Java将pdf文档保存到本地文件中。

我有点糊涂，因为我有pdf文件，我可以看到内容（在记事本/代码中，但是当我使用Adobe / Microsoft Edge打开它时，所有页面都是空白的，我不知道为什么。

在FilePond文档中，未指定defaut编码，我不知道有没有办法在request（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);

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