后端文件流传输文件内容到前端

/**
     * 传文件到web页面,编码为UTF-8
     *
     * @param response
     * @param fileFullPath
     * @param response
     * @throws IOException
     */
    public void getFileContent(String fileFullPath, HttpServletResponse response) throws IOException {
        String[] split = fileFullPath.split("\\\\");
        if (split.length < 2) {
            split = fileFullPath.split("/");
        }
        response.setCharacterEncoding("UTF-8");
        // attachment是以附件的形式下载,inline是浏览器打开
        response.setHeader("Content-Disposition", "inline;filename=" + split[split.length - 1] + ".txt");
        response.setContentType("text/plain");
        // 把二进制流放入到响应体中
        ServletOutputStream os = response.getOutputStream();
        File file = new File(fileFullPath);
        byte[] bytes = FileUtils.readFileToByteArray(file);
        os.write(bytes);
        os.flush();
        os.close();
    }

页面中文可能会乱码,待处理

### 实现前端读取图片文件并发送至后端 #### 使用`FileReader` API读取图片文件 为了实现从前端获取图片文件流并将其作为二进制数据发送到后端服务器,可以利用 `FileReader` 对象来异步读取文件内容。通过监听文件入事件,可以选择要上传的图片文件。 ```html <input type="file" id="fileInput"> <button onclick="uploadImage()">Upload</button> <script> function uploadImage() { const fileInput = document.getElementById('fileInput'); const file = fileInput.files[0]; if (!file) return; let reader = new FileReader(); reader.readAsArrayBuffer(file); reader.onloadend = () => { sendToServer(reader.result); }; } </script> ``` 此段代码展示了如何使用 HTML 文件入控件让用户选择图像文件,并调用 JavaScript 函数 `uploadImage()` 来触发上传操作[^1]。 #### 发送二进制数据到后端 对于不同浏览器的支持情况,在现代浏览器中推荐采用 Fetch API 进行网络请求,因为它提供了更简洁易懂的方法来进行 HTTP 请求。下面是一个例子展示怎样把之前获得的 ArrayBuffer 数据传送给服务器: ```javascript async function sendToServer(arraybuffer) { try { await fetch('/api/upload', { method: 'POST', headers: {'Content-Type': 'application/octet-stream'}, body: arraybuffer, }); console.log("成功上传"); } catch (error) { console.error("上传失败:", error); } } ``` 这段脚本定义了一个名为 `sendToServer` 的函数,它接受一个参数 `arraybuffer` 表示已加载好的二进制数据。该函数会尝试向指定路径 `/api/upload` POST 提交这些数据。注意这里设置了 Content-Type 头部为 application/octet-stream 以便告知服务端接收到的是原始字节序列而非其他形式的数据[^2]。 如果考虑到旧版浏览器兼容性问题,则可能需要额外添加对 XMLHttpRequest 的 polyfill 或者直接修改上述代码片段中的 `sendToServer` 方法以适应特定环境下的需求[^3]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值