温馨提示:本文翻译自stackoverflow.com,查看原文请点击:java - Unable to visualize pdf file after submitting via FilePond component in React to a servlet(backend)
filepond java java-ee-8 reactjs servlets

java - 通过React中的FilePond组件提交到servlet(后端)后无法显示pdf文件

发布于 2020-10-07 02:31:07

我有一个前端的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;
    }

需求体

编辑:谢谢里克的确调用formData.append('file',file,file.name); 是正确的,但编码(添加?符号)仍然是相同的问题,这就是为什么我认为这可能是发送pdf文件的唯一可能性,因为base64我已经安装了插件,但是异步,我可以不能调用方法getFileEncodeBase64String,而在servlet中,请求流不是正确的,如图所示。 在这里,您可以看到鼠标选择之前的顺序我有一个8初始和之后 请求流?

查看更多

提问者
ana maria
被浏览
5
Rik 2020-05-28 15:16

您不必编码文件

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

你可以做:

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

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