JS创建文件并上传服务器

2020-12-25 04:28

阅读:586

YPE html>

标签:二进制流   support   targe   style   rem   ann   mda   文本文件   a标签   

一、前言

  一般上传文件,都是通过标签,然后选择本地文件,再进行上传。最近遇到一个需求,就是由JS创建好一个二进制文件,然后上传到服务器。原理还是比较简单的,就是通过js提供的blob创建一个数据流。然后生成一个文件实例。然后提交到后端。

二、服务器代码

  服务器代码就没有什么说的,就是普通的接收文件的springboot代码片段。

 1 package com.wunaozai.demo.uploadfile;
 2 
 3 import java.io.File;
 4 import java.util.Iterator;
 5 import java.util.UUID;
 6 
 7 import javax.servlet.http.HttpServletRequest;
 8 
 9 import org.springframework.stereotype.Controller;
10 import org.springframework.web.bind.annotation.GetMapping;
11 import org.springframework.web.bind.annotation.PostMapping;
12 import org.springframework.web.bind.annotation.RequestMapping;
13 import org.springframework.web.bind.annotation.ResponseBody;
14 import org.springframework.web.multipart.MultipartFile;
15 import org.springframework.web.multipart.MultipartHttpServletRequest;
16 import org.springframework.web.multipart.commons.CommonsMultipartResolver;
17 
18 @Controller
19 @RequestMapping(value="/test/")
20 public class UploadFileDemoController {
21 
22     @GetMapping(value="web")
23     public String web() {
24         return "upload/web";
25     }
26     
27     @ResponseBody
28     @PostMapping(value="upload")
29     public String uploadFile(HttpServletRequest request) {
30         CommonsMultipartResolver resolver =
31                 new CommonsMultipartResolver(request.getSession().getServletContext());
32         if(!resolver.isMultipart(request)) {
33             return "err";
34         }
35         MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
36         Iterator it = multiRequest.getFileNames();
37         while(it.hasNext()) {
38             try {
39                 MultipartFile uploadfile = multiRequest.getFile(it.next());
40                 File newfile = new File("C:\\tmp\\", "cc.txt");
41                 uploadfile.transferTo(newfile);
42             } catch (Exception e) {
43                 e.printStackTrace();
44             }
45         }
46         return "ok.";
47     }
48 }

 

三、前端代码

  前端代码,分成三种方式上传文件,还有一种创建文件直接下载。

  1. 是通过传统input的file类型,选择本地文件,然后上传。

  2. 是通过创建文本文件,然后上传到服务器。

  3. 是通过创建二进制流,然后上传到服务器。

  4. 是通过创建二进制流,然后通过a标签,思想下载功能。

  1 
  2 
  3  4   5 JS创建文件  6 
  7 
  8 
  9     

10 11

12

13 14

15

16 17

18

19 20

21

22 23

24 107 108

 

 四、效果图

  如下图,就是上传到服务器上保存的文件,通过xxd工具查看二进制。可以看到有文件头5AA5.

技术图片

   下面这个是前端界面

技术图片

  本篇只是做日常记录。

  

 

  本文地址: https://www.cnblogs.com/wunaozai/p/13938699.html

JS创建文件并上传服务器

标签:二进制流   support   targe   style   rem   ann   mda   文本文件   a标签   

原文地址:https://www.cnblogs.com/wunaozai/p/13938699.html


评论


亲,登录后才可以留言!