前端XMLHttpRequest、Fetch API、Axios实现文件上传、下载方法及后端Spring文件服务器处理方法

已于 2024-08-11 18:27:06 修改
阅读量1.4k 收藏 14
点赞数 12
分类专栏： Web开发技术 文章标签： html5 spring boot
于 2024-07-14 18:10:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43521551/article/details/140420166
版权

前言

本文总结Web应用开发中文件上传、下载的方法，即从前端表单输入文件并封装表单数据，然后请求后端服务器的处理过程；从基础的JavaScript中XmlHttpRequest对象、Fetch API实现上传、下载进行说明，并给出了前端常用的axios库的请求方式，然后给出了后端Spring实现文件服务器的方法，其中就文件上传中遇到的大小限制、跨域请求、外链请求等关键点进行了说明

上传文件

前端上传请求发起的方式：若不依赖其他库常使用XMLHttpRequest、Fetch API上传方式，若使用第三方库可用Axios请求上传

后端文件服务器的几种处理方式：

  • 文保存到磁盘目录

    文件存取请求直接根据url地址得出文件所在磁盘目录位置，访问速度快

  • 文件直接保存到数据库

    若文件比较大，影响数据库处理性能，但相比保存到磁盘目录的方法可以确保数据更安全可靠性

  • 文件二次请求上传至第三方服务器

    后端将接收的表单数据按照第三方接口封装进行请求上传

XMLHttpRequest文件上传

1.表单输入文件

<!-- 设置multiple属性时可选择多个文件，可在读取文件时使用onchange监听读取到文件内容后预览、或立即上传，也可以单独用一个按钮事件控制上传 -->
<input type="file" multiple id="fileInput" onchange="onShowTextContent(event)"></input>
 <pre id="fileContent"></pre>
<button onclick="uploadFile()">上传文件</button>

预览文本内容并显示方法

<script>
function onShowTextContent(event) { // 预览文本内容并显示方法
            const file = event.target.files[0];
            if (file && file.type.startsWith("text/plain") ) {
                const reader = new FileReader();
                // 定义文件读取完成后的处理逻辑
                reader.onload = function (e) {
                    const fileContent = e.target.result;
                    // 显示文本内容
                    document.getElementById('fileContent').textContent = fileContent;
                };
                // 读取文件为文本内容
                reader.readAsText(file);
            } else {
                console.error('No file selected');
            }
        }  
</script>

2.XMLHttpRequest上传文件

XMLHttpRequest对象简记为XHR，一个内置的浏览器对象，提供简单的方式来发送和接收从 URL 的数据而无需刷新整个页面，这使得它成为 AJAX（Asynchronous JavaScript and XML）编程的核心技术之一

AJAX是一种在 Web 应用中通过异步发送 HTTP 请求向服务器获取内容，并使用这些新内容更新页面中相关的部分，而无需重新加载整个页面的 Web 开发技术，这可以让网页更具有响应性，由于这种技术在现代Web开发中太过常见以至于AJAX这个术语很少被使用到

XMLHttpRequest具有广泛的兼容性，几乎所有浏览器都支持，包括老版本浏览器，而Fetch API 但在某些旧浏览器（如 IE）中不支持

function uploadFile() {
    let fileInput = document.getElementById("fileInput");  // 获得input文件输入的引用
    let files = fileInput.files;  
    if (files.length === 0) {
        return;  // input节点的files是一个文件列表，若 files.length === 0 表示未选择文件，需要跳过
    }
    let formData = new FormData(); // 创建表单数据对象，封装文件
    for (let file of files) {
        //  file有一些属性常用于校验，如 file.name 文件名称，file.size 文件字节大小，file.type表示文件类型
        formData.append("files", file); 
    }
    let request = new XMLHttpRequest();   // 创建一个http请求
    let url = "http://127.0.0.1:7999/file/upload";
    request.open("POST", url, true);  // 参数1为请求方式，参数2为上传服务器地址，参数3取true表示异步
    request.onload = function () {
        if (request.status === 200) {
            console.log("上传完成：", request.responseText); 
        } else {
            console.log("上传出错：", request.statusText);
        }
    };
    request.onerror = function () {
        console.log("Error:", request.statusText);
    };
    request.send(formData); // 发送表单文件数据
}

3. 后端接收文件和保存

先对上传的文件大小、接收文件的类型做判断，然后将原始文件名称、大小、内容类型、存储位置等信息到数据库以提供分类、统计分析

Controller层接收上传的文件
	// @RequestParam 注解标注表单的参数名，与form表单一致，若该注解缺省则默认参数名称为"multipart"
    // 入参 MultipartFile[] 数组表示接受多个文件，若写为 MultipartFile对象则只会接受第1个文件，cconsumes 指定匹配请求头 "content-type" 
    @PostMapping(value="/upload/list",consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
	public Map<String,Object> uploadFileList(@RequestParam("files") MultipartFile[] files);
Service层本地存储文件
// controller层调用的文件保存方法，对 MultipartFile[] files 中每个对象处理，判断文件上传个数等
public Map<String,Object> saveMultipartFile(MultipartFile multipartFile) throws IOException {
        Map<String, Object> results = new HashMap<>();
        if (multipartFile.getSize() >= 1024 * 1024 * 10) {
            throw new RuntimeException("文件大小超过了最大限制10M");
        }
        // multipartFile.getContentType() 获取内容类型
        final String oriName = multipartFile.getOriginalFilename(); 
        // 原始文件名不能保证唯一性，需要生成一个唯一文件名，此处仅简单示例，实际开发中文件名称需要确保唯一性
        String newName = System.currentTimeMillis() + oriName.substring(oriName.lastIndexOf(".")); //
        String fullPath = System.getProperty("user.dir") + "/" + newName;
        final InputStream inputStream = multipartFile.getInputStream();
        File file = new File(fullPath);
        // 也可以直接使用 multipartFile.transferTo(file);
        if (file.createNewFile()) {
            FileCopyUtils.copy(inputStream, Files.newOutputStream(file.toPath()));
        }
        // 返回一些有用的信息，若是图片需要返回url等
        results.put("url","http://127.0.0.1:7999/file/"+newName); 
        return results;
    }
后端转发请求上传到第三方
    public Result<FileUploadResponse> uploadImageForward(MultipartFile multipartFile) throws IOException {
        MultiValueMap request = new LinkedMultiValueMap(1);
        ByteArrayResource byteArrayResource = new ByteArrayResource(multipartFile.getBytes()) {
            @Override   // 需要覆盖默认的方法，不然无法获取名称
            public String getFilename() {
                return multipartFile.getOriginalFilename();
            }
        };
        // 此处从multipartFile获取byte[],如果是上传本地文件可以使用io获取byte[]
        request.add("fileName", byteArrayResource);
        String uploadUrl = this.serverBaseUrl+"/upload"; // 假如这是第三方文件上传地址
        FileUploadResponse response = restTemplate.postForObject(uploadUrl, request, FileUploadResponse.class);  
        return new Result<>(response);
    }

4.文件上传大小配置

在 Spring Boot 项目中，可通过配置文件或编程方式来设置文件上传的大小

配置文件方式（application.properties 或 application.yml）

application.properties

# 设置单个文件的最大大小为10MB（默认情况下为1MB)
spring.servlet.multipart.max-file-size=10MB
# 设置整个请求的最大大小为10MB（默认情况下是10MB）
spring.servlet.multipart.max-request-size=10MB

application.yml

spring:
  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 10MB
编程方式

可进行更细粒度的控制，可以通过编程配置 MultipartConfigElement实现

@Configuration
public class ServletMultipartConfig {

     // 配置文件中添加示例：spring.server.MaxFileSize=1MB
    @Value("${spring.server.maxFileSize}")
    private DataSize maxFileSize;
    
    // 指定单个文件最大尺寸，如果超过这个大小，后端将不会接受该请求,前端会手到错误：Code	Details  Error: Request Entity Too Large
    @Bean
    public MultipartConfigElement multipartConfigElement() {
        // log.info("MaxFileSize="+maxFileSize.toMegabytes());
        MultipartConfigFactory factory = new MultipartConfigFactory();
        factory.setMaxFileSize(maxFileSize); // 但个文件最大大小
        factory.setMaxRequestSize(maxFileSize); // 整个请求的最大大小
        return factory.createMultipartConfig();
    }
}

5.后端跨域请求配置

文件上传在跨域的情况下会上传失败，因此有必要设置服务器的跨域请求规则

springboot的配置类中添加跨域请求配置，以拦截器方式实现为例：

@Configuration
public class WebConfig implements WebMvcConfigurer { 
    @Bean
    public HandlerInterceptor accessInterceptor() {
        return new HandlerInterceptor(){
            @Override
            public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
                // 针对这样的跨域问题： Access to XMLHttpRequest at 'http://192.168.58.111:8000/index.html' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
                // 这里的 Access-control-Allow-Origin就不要使用通配符*，而是要使用确切的值
                response.setHeader("Access-control-Allow-Origin", request.getHeader("Origin"));
                response.setHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS,PUT,DELETE,HEAD,PATCH");
                // 若前端传送了自定义的请求头而没有在这里面设置，某些情况下则会提示跨域请求错误：not allowed by Access-Control-Allow-Headers in preflight response.
                response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization");
                response.setHeader("Access-Control-Allow-Credentials", "true"); // 前端请求设置credentials: 'include', 这里就必须设置为true
                response.setHeader("Access-Control-Max-Age", "3600");
                // 跨域时会首先发送一个option请求，这里我们给option请求直接返回正常状态
                if (request.getMethod().equals(RequestMethod.OPTIONS.name())) {
                    response.setStatus(HttpStatus.OK.value());
                    return false;
                }
                return true;
            }
        };
    }
    @Override
    public void addInterceptors(InterceptorRegistry registry) { // 添加拦截器
        registry.addInterceptor(this.accessInterceptor())
            .excludePathPatterns("/error")
            .excludePathPatterns("/webjars/**", "/v2/api-docs/**");
    }
}

与上述拦截器实现的效果一样，也可以采用过滤器实现跨域请求配置：

   @Bean // 注册过滤器
    public FilterRegistrationBean<CustomCorsFilter> customCorsFilterFilterRegistrationBean(){
        FilterRegistrationBean<CustomCorsFilter> registrationBean = new FilterRegistrationBean<>(this.customCorsFilter());
        registrationBean.setOrder(-1); // 设置序号，越小优先级越高越靠前执行，确保在其他业务处理之前执行到
        registrationBean.addUrlPatterns("/*");
        return registrationBean;
    }
    @Bean // 确保过滤器被加入到ioc容器
    public CustomCorsFilter customCorsFilter(){
        return new CustomCorsFilter();
    }
   // 实现一个过滤器，继承Filter接口，覆盖doFilter方法
   public static class CustomCorsFilter implements Filter{
       @Override
       public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
           HttpServletResponse response = (HttpServletResponse) servletResponse;
           HttpServletRequest request = (HttpServletRequest) servletRequest;
           response.setHeader("Access-control-Allow-Origin", request.getHeader("Origin"));
           response.setHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS,PUT,DELETE,HEAD,PATCH");
           // 若前端传送了自定义的请求头而没有在这里面设置，某些情况下则会提示跨域请求错误：not allowed by Access-Control-Allow-Headers in preflight response.
           response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization");
           response.setHeader("Access-Control-Allow-Credentials", "true"); // 前端请求设置credentials: 'include', 这里就必须设置为true
           response.setHeader("Access-Control-Max-Age", "3600"); // 设置 Access-Control-Max-Age 为 3600，表示预检请求的结果可以缓存 3600 秒（即 1 小时），在此期间浏览器不需要为相同的跨域请求再次发送预检请求
           filterChain.doFilter(servletRequest,servletResponse);
       }
   }

Axios文件上传

Axios是一个基于promise的http库，可以用于Node.js中，可兼容所有主流浏览器，该库提供了简洁的API用于执行Http请求，可拦截请求和响应，转换请求和响应请求数据等

引入axios库，然后使用axios提供的方法进行文件上传，后端接收文件的方法与上述一致

<!-- 引入axios库，实际开发中建议用 npm install axios 安装到本地 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
function uploadFileByAxios() {
            const files = document.getElementById('fileInput').files;
            const formData = new FormData();
            for (let i = 0; i < files.length; i++) {
                formData.append('files', files[i]);
            }
    		let httpHeaders = {};  
     		// 表单Content-Type可以不用设置，默认就是 httpHeaders['Content-Type'] = 'multipart/form-data';
            // let uploadUrl = "http://127.0.0.1:7999/file/upload";
            axios.post(uploadUrl, formData, { headers: httpHeaders }) 
                .then(response => {
                    console.log('Files uploaded successfully:', response.data);
                })
                .catch(error => {
                    console.error('Error uploading files:', error);
                });
        }
 </script>

Fetch API实现文件上传

Fetch API 是一个用于现代Web应用执行网络请求的内置接口，它在XMLHttpRequest 之后出现

Fetch API 基于 Promise，可以使用链式结构来处理请求和响应，它提供了一种更简单、更灵活的方式来进行异步请求

function uploadFilesByFetch() {
    let files = document.getElementById('fileInput').files;
    let formData = new FormData();
    for (let i = 0; i < files.length; i++) {
        formData.append('files', files[i]);
    }
    let uploadUrl = uploadUrl = "http://127.0.0.1:7999/file/upload";
    fetch(uploadUrl, {
        method: 'POST',
        body: formData
    })
        .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok ' + response.statusText);
        }
        return response.json(); 
    })
        .then(data => {
        console.log('Files uploaded successfully:', data);
    })
        .catch(error => {
        console.error('Error uploading files:', error);
    });
}

下载文件

下载文件包括交互事件请求下载、超链接下载

XMLHttpRequest文件下载

1.下载按钮事件

<div>
    <label>下载地址：</label>
    <input type="text" id="downloadUrl" value="http://127.0.0.1:7999/file/download/filename"></input>
</div>
<button onclick="downloadFileByXHR()">XMLHttpRequest下载</button>
<!-- 可以隐藏一个a标签，通过其他按钮事件触发 -->
<button onclick="downloadLink()">超链接下载方式</button><a id="link" style="display: none;"></a>
<!-- 超链接下载方法：直接指定带有href属性的a标签点击即可下载 -->
<a href="http://127.0.0.1:7999/file/download/24071411085841900.txt" download="filename.txt">点击下载文件</a>

2.XMLHttpRequest下载文件

关键是设置responseType，以及对响应数据二进制数据处理

function downloadFileByXHR() {
    let downloadUrl = document.getElementById("downloadUrl").value; // 下载的url地址
    // let downloaduUrl = "http://192.168.95.59:7999/download/file/"+fileName;
    let request = new XMLHttpRequest();
    request.open("GET", downloadUrl, true);
    // 响应被处理为 Blob 对象，可以通过 `xhr.response` 访问响应数据，适用于处理二进制数据，如文件、图像等
    request.responseType = "blob";
    request.onload = function () {
        if (request.status === 200) {
            let contentType = request.getResponseHeader("Content-Type");
            //验证响应响应数据，若异常则响应 Content-Type 为 json 认定为下载失败
            if (contentType && contentType.startsWith('application/json')) {
                const reader = new FileReader();
                reader.onload = function () {
                    const text = reader.result; // 下载出错时后端返回的错误信息
                    console.log("text:", text);
                };
                reader.readAsText(request.response); // 尝试将blob数据读取为文本数据
                return;
            }
            let disposition = request.getResponseHeader("Content-Disposition");
            // Content-Disposition: attachment; filename=24070701440188300.png
            const data = new Blob([request.response], { type: request.getResponseHeader("Content-Type") });
            const url = window.URL.createObjectURL(data);
            const link = document.createElement("a");
            link.href = url;
            let fileName = getFileName(disposition);
            if (fileName !== "") {
                link.download = fileName;
            }
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(url); // 释放内存
            link.remove();
        }
    };
    request.onerror = function () {
        console.low("error:", request.responseText);
    };
    request.send();
}

链接下载方法

// 设置隐藏表单下载链接，点击即可下载，这种方法不够友好，若后端错误了前端直接暴露原始错误信息
function downloadLink() {
    console.log("链接下载");
    let link = document.getElementById("link");
    link.href = "http://127.0.0.1:7999/file/download/24071415521018500.txt";
    // link.download = "test.txt"; // 可指定下载后的名称
    link.click();
}

3.后端文件下载处理

Controller层接收文件下载请求

	@ApiOperation(value = "下载文件")
	@RequestMapping(value = "/download/{fileName}", method = RequestMethod.GET)
	ResponseEntity<byte[]> getDownloadFileResponse(@PathVariable("fileName") String fileName);

Service层读取文件

// 给前端响应一个字节数组，使用ResponseEntity封装以便设置HttpHeaders   
public ResponseEntity<byte[]> getDownloadFileResponse(String fileName) {
        byte[] imageBytes = this.getLocalFile(fileName); // 获取文件的字节数组
        String contentType = getFileMediaType(fileName).toString();
        try {
            fileName = URLEncoder.encode(fileName, "UTF-8"); // 中文字符串编码处理避免前端收到乱码
        } catch (UnsupportedEncodingException e) {
            throw new RuntimeException(e);
        }
        HttpHeaders headers = new HttpHeaders();
        // headers.add("Custom-Action", "download");
        headers.add(HttpHeaders.CONTENT_TYPE, contentType); // 设置Content-Type
        headers.add(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=" + fileName); // 设置附件，前端点击超链接下载时该名称将作为下载的文件名称
        headers.add("Access-Control-Expose-Headers", "Content-Type,Content-Disposition,Custom-Action");
        return new ResponseEntity<>(imageBytes, headers, HttpStatus.OK);
    }
  
  // 读取磁盘指定文件为字节数组
  public byte[] getLocalFile(String fileName) {
        File file = new File(localFileProperties.getPath() + "/" + fileName); // 服务器文件位置
        FileInputStream inputStream = null;
        try {
            inputStream = new FileInputStream(file);
            byte[] bytes = new byte[inputStream.available()];
            inputStream.read(bytes, 0, inputStream.available());
            return bytes;
        } catch (IOException e) {
            e.printStackTrace();
            log.error("获取文件失败:",e);
            throw new RuntimeException("找不到指定的文件");
        }
    }
    // 根据文件名后缀确定图片的 MIME 类型
    public MediaType getFileMediaType(String imageName) {
        String fileExtension = imageName.substring(imageName.lastIndexOf(".") + 1).toLowerCase();
        switch (fileExtension) {
            case "jpeg":
            case "jpg":
                return MediaType.IMAGE_JPEG;
            case "png":
                return MediaType.IMAGE_PNG;
            case "gif":
                return MediaType.IMAGE_GIF;
            case "bmp":
                return MediaType.parseMediaType("image/bmp");
            default:
                return MediaType.APPLICATION_OCTET_STREAM; // 默认为二进制流
        }
    }

4.后端外链请求方法

Controller层接收一个下载外链的请求

@ApiOperation(value = "第三方外链下载") 
@RequestMapping(value = "/outlink/download", method = RequestMethod.GET)
ResponseEntity<byte[]> getDownloadOutlinkResponse(@RequestParam("url") String url);

Service层读取第三方服务器的文件

这里为啥前端不直接访问第三方文件服务器，因为在一些业务场景中，前端可能没有权限访问直接访问、直接访问不安全或者在对第三方外链的访问情况做分析统计时需要

    public ResponseEntity<byte[]> downloadOutLink(String fileUrl) {
        log.info("downloadOutLink fileUrl：{}", fileUrl);
        RestTemplate restTemplate = new RestTemplate();
        ResponseEntity<byte[]> responseEntity = restTemplate.exchange(fileUrl, HttpMethod.GET, null, byte[].class);
        byte[] bytes = responseEntity.getBody();
        log.info("return entity...");
        HttpHeaders oldHeaders = responseEntity.getHeaders();
        oldHeaders.entrySet().forEach(entry -> {
            log.info("headName:{}, headValue:{}", entry.getKey(), entry.getValue());
        });
        String contentDisposition = oldHeaders.getFirst(HttpHeaders.CONTENT_DISPOSITION);
        String contentType = oldHeaders.getFirst(HttpHeaders.CONTENT_TYPE);
        HttpHeaders responseHeaders = new HttpHeaders(); 
        //  新创建一个 responseHeaders 用于设置返回前端的请求头，此处没有直接使用oldHeaders，因为这样可能会暴露出现某些不被允许的请求头以至于出错
        if (contentDisposition != null && !Objects.equals("", contentDisposition)) {
            responseHeaders.add(HttpHeaders.CONTENT_DISPOSITION, contentDisposition);
        } else {
            // 获取一个文件扩展名
            String fileSuffix = "";
            if(fileUrl.contains(".")){
                String suffix = fileUrl.substring(fileUrl.lastIndexOf(".")+1).toLowerCase();
                if(suffix.length()>0  && suffix.length()<5){
                    fileSuffix = suffix;
                }
            }
            if(Objects.equals(fileSuffix,"")){
                fileSuffix = "download";
            }
            String fileName = System.currentTimeMillis()+"."+fileSuffix;
            responseHeaders.add(HttpHeaders.CONTENT_DISPOSITION, String.format("attachment; filename=%s",fileName));
        }
        responseHeaders.add(HttpHeaders.CONTENT_TYPE, contentType);
        return ResponseEntity.ok()
                .headers(responseHeaders)
                .body(bytes);
    }

Fetch API下载文件

function downloadFileByFetch() {
    // const url = 'http://127.0.0.1:7999/file/upload'; // 文件的URL
    let url = document.getElementById("downloadUrl").value;
    fetch(url)
        .then(async (response) => {
            console.log("response:", response);
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            const contentType = response.headers.get('Content-Type');
            // 后端抛出异常时，返回json数据
            if(contentType && contentType.startsWith("application/json")){
                const jsonResponse = await response.json();
                if (jsonResponse.code === 1) {
                    // 后端返回了统一错误响应
                    console.error('Request failed with message:', jsonResponse.msg);
                    showInfo(JSON.stringify(jsonResponse));
                    return;
                }
            }
            console.log("contentType:",contentType);
            const disposition = response.headers.get('Content-Disposition');
            console.log("disposition:", disposition);
            let fileName = "unknown.download";
            if (disposition !== null) {
                const fileNameMatch = disposition.match(/filename="?([^"]+)"?/);
                    if (fileNameMatch.length === 2) {
                        fileName = fileNameMatch[1];
                    }
                fileName = fileName.replace(/\+/g, ' ');
                fileName = decodeURI(fileName);
            }
            response.blob().then(blob => {
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.style.display = 'none';
                a.href = url;
                a.download = fileName; // 设置下载文件名
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(url); // 释放URL对象
            });

        })
        .catch(error => {
            console.error('error:', error);
        });
}

Axios下载文件

const downloadFileByAxios = () => {
    // 使用 Axios 发起 GET 请求
    // let url = "http://192.168.95.59:7999/download/file/xxx";
    let url = document.getElementById("downloadUrl").value;
    let httpHeaders = {};
    // httpHeaders = { "Custom-Action": "RQ-download" };
    axios.get(url, { responseType: 'blob', headers: httpHeaders })
        .then(response => {
        // 请求成功处理
        console.log("收到下载数据:", response);
        // let res = response.data;
        handleAxiosDownloadResponse(response.data, response.headers);
    }).catch(error => {
        // 请求失败处理
        console.error('Error fetching posts:', error);
    });
}    

// 处理axios下载的响应文件
const handleAxiosDownloadResponse = async (data, headers) => {
    const contentType = headers['content-type'];
    // 后端返回的不是文件而是json对象，判断为异常
    if (contentType && contentType.startsWith("application/json")) {
        // data.text()返回一个Promise对象，因此要使用await，此时方法使用使用async关键字标识为异步方法
        let text = await data.text();
        console.log("text:", text);
        const jsonObj = JSON.parse(text);
        if (jsonObj.code === 1) {
            console.log("请求异常：", text);
        }
        showInfo(text);
        return;
    }
    const blob = new Blob([data], { type: headers['content-type'] });
    // 创建一个指向 Blob 对象的 URL
    const url = window.URL.createObjectURL(blob);
    // 创建一个 <a> 元素，并设置其 href 属性指向 Blob URL
    const a = document.createElement('a');
    a.href = url;
    // 从响应头或其他方式获取文件名
    const contentDisposition = headers['content-disposition'];
    console.log("content-disposition:", contentDisposition)
    let fileName = '';
    if (contentDisposition) {
        const fileNameMatch = contentDisposition.match(/filename="?([^"]+)"?/);
        if (fileNameMatch.length === 2) {
            fileName = fileNameMatch[1];
        }
        fileName = fileName.replace(/\+/g, ' ');  // 将符号+替换为空格
        fileName = decodeURI(fileName);
        // console.log("fileName:",fileName);
    }
    a.download = fileName; // 设置下载文件名
    // 将 <a> 元素添加到 DOM 并触发点击事件
    document.body.appendChild(a);
    a.click();
    // 移除 <a> 元素并释放 Blob URL
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
}

Axios读取文件内容

const readFileContentByAxios = () => {
    // 使用 Axios 发起 GET 请求
    // let url = "http://192.168.95.59:7999/download/file/xxx";
    let url = document.getElementById("downloadUrl").value;
    let httpHeaders = {};
    // responseType选项取值与XMLHttpRequest的responseType一样，指定为arraybuffer，表示响应被处理为 ArrayBuffer 对象，适用于处理原始二进制数据
    axios.get(url, { responseType: 'arraybuffer', headers: httpHeaders })
        .then(async (response) => {
        // 请求成功处理
        console.log("收到数据:", response);
        // let res = response.data;
        const text = new TextDecoder('utf-8').decode(new Uint8Array(response.data));
        console.log(text); 
    })
        .catch(error => {
        // 请求失败处理
        console.error('Error fetching posts:', error);
    });
}

参考资料

1.XMLHttpRequest(XHR)对象

2.Fetch API接口指南

3.Axios API中文文档

4.Spring Framework文档

littleshimmer
关注
专栏目录
axios上传文件
weixin_43412413的博客
04-29 6874
1、request.js import axios from 'axios' // eslint-disable-next-line no-unused-vars import { Message } from 'element-ui' // import store from '@/store' // create an axios instance let base = '' // 判断环境变量 if (process.env.NODE_ENV === 'production') { base
SpringBoot+Vue.js实现前后端分离的文件上传功能
10-18
在上传按钮的点击事件中，可以使用JavaScript的XMLHttpRequest对象或更现代的Fetch API发起对后端上传接口的请求，并将选中的文件作为表单数据发送。 前端代码中可能会涉及到的关键点有： 1. 使用来让用户选择文件...
用XMLHttpRequest实现文件上传和下载
m0_55251727的博客
06-04 461
XMLHttpRequest 实现调用接口进行上次和下载
【总结】2123- 如何二次封装 Axios 下载文件和上传文件？
最新发布
pingan8787
08-05 289
一 下载文件正常情况下，我们用axios下载下来的文件是一个二进制的东西，需要处理才能成一个真真的文件。比如：我用express写一个接口，就是当页面访问的时候，下载这个美女图片。服务端客户端浏览器console上图里面，对象data里面放了很多二进制的东西，就是我们的文件内容，我们需要用Blob对象，把他转成Blob，然后用 window.URL.createObjectURL(blob) 给出...
php ajax xmlhttprequest,使用Ajax XmlHttpRequest上传文件
weixin_42372963的博客
03-11 152
嗨，我正在尝试使用此代码发送带有xmlhttprequest的文件。var url= "http://localhost:80/....";$(document).ready(function(){document.getElementById('upload').addEventListener('change', function(e) {var file = this.files[0];va...
XMLHttpRequest上传文件
m0_60013147的博客
08-13 3359
XMLHttpRequest上传文件，显示文件上传进度
xmlhttp上传文件(转贴)
雪后残阳
11-05 893
使用xmlhttp 实现多文件上传出处    如今xml技术渐渐成熟，成为了一种网站传播数据的又一种方式,下面是我用xmlhttp写的一个多文件上传程序.包括客户端和服务端两部分..本程序的实现是利用xml可以在其结点存放经base64编码的二进制文件,先在客户端生成包含要传文件的xml 再,通过xmlhttp发送到服务端.下面是客户端:
使用FormData实现上传多个文件
10-17
总的来说，这个例子展示了如何使用`FormData`与XMLHttpRequest配合，实现前端多文件上传，并通过Spring MVC在后端接收并处理这些文件。这种技术对于现代Web应用中的文件上传非常有用，因为它允许异步、无刷新的文件...
AJAX+echarts+springboot实现前端向后端请求数据
09-26
通常，我们会使用`XMLHttpRequest`对象或者更现代的`fetch` API来实现AJAX请求。 **ECharts** 是由百度开源的一个强大的数据可视化库，它支持丰富的图表类型，如柱状图、折线图、饼图等，并且具有高度可定制化的...
前端 如何把请求发到 后端 的 Controller
07-20
前端可以使用原生的JavaScript（如`fetch`或`XMLHttpRequest`）或者第三方库（如Axios）来发起这些请求。 #### 3. 请求路由到Controller 当前端向后端发送请求时，请求首先会被路由到一个特定的Controller。...
前端跨域+后端跨域.zip
02-15
在Vue.js项目中，前端可以使用axios等库进行HTTP请求，配置代理服务器或者让后端配合设置CORS策略来实现跨域。例如，在Vue CLI项目中，可以在`vue.config.js`中配置代理服务器，将API请求转发到目标服务器，从而规避...
axios实现简单文件上传功能
01-19
本文实例为大家分享了axios实现文件上传功能的具体代码，供大家参考，具体内容如下 前台页面： 引入axios js文件 [removed][removed] HTML: <input type=file name=img/> 上传图片 JS: function upload() { alert(上传) let file = document.getElementsByName('img')[0].fil
JavaScript 之 使用 XMLHttpRequest 上传文件
weixin_34259159的博客
04-06 193
1 <div id="div1"> 2 <input type="file" id="uploadfile" style="width: 100px; height: 25px;" /> 3 <input id="b1" type="button" value="上传" style="display: in...
前端文件的上传与下载
u014562688的博客
11-14 3503
最近发现很多人对文件上传下载不太理解，从网上百度来的代码也经常出错，遂对前端文件上传与下载作简单总结。
前端传file文件给后端
weixin_61175223的博客
03-10 8896
许多前端小伙伴在传file给后端的时候经常会遇到一个问题：缺少请求头Content-Type:multipart/form-data的错误提示。解决它其实很简单，下面大家直接看代码： let data = new FormData(); data.append('参数名','你要传的file文件'); //如果还有其他参数复制就行了 data.append('参数名','参数'); axios.post('接口地址',data) .then(res => { if(res.data.co
【前端】-【前端文件操作与文件上传】-【前端接受后端传输文件指南】
CaraYQ的博客
05-05 5880
/ 进度条可以用axios的onUploadProgress方法，且发送切片时可以并行发送请求，后续可以自行优化。// 将切割后的Blob对象转成File对象（第二个参数是文件名），之后就可以上传切割后的File对象。// multiple的多文件上传其实很不友好，需要用户在选择文件时按住ctrl多选，否则就会变成单选。// 直接将转换结果赋值给img的src，设置src的大小即可获得浓缩图。//切片上传，在上传的时候进行切片，文件改变时只赋值。// 使用blob的slice方法可以切割文件。
使用XMLHTTPRequest实现上传文件进度条
漫漫学习成长之路
08-15 2285
 前台： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;XMLHttpRequest上传文件进度实现&lt;/title&gt; &lt;script type="text/javascript"&gt;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值