vue文件上传和下载_vue上传文件组件

全栈程序员站长

发布于 2022-09-22 20:41:51

2.4K00

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

注

文件上传content-type：multipart/form-data

Vue端

多文件上传

let files = new FormData()
for (let i in this.fileList) { 
   
    files.append('files', this.fileList[i].raw)
}

下载

window.open(this.BASE_URL + '/download/' + id)

Controller层

上传

    @RequestMapping("/uplaod")
    @ResponseBody
    public RespBean add(@RequestParam("file") MultipartFile file) { 
   
    //TODO 处理上传的数据
    String fileName = file.getOriginalFilename();
    String contentType = file.getContentType();
    long size = file.getSize();
    
    }

下载

    @GetMapping("/download/{id}")
    @ResponseBody
    public void show(@PathVariable("id") String id, HttpServletResponse response) { 
   
        //TODO 获取需要下载的数据
        String contentType = null;
        String fileName = null;
        byte[] data = null;
        
        try { 
   
            response.setCharacterEncoding("UTF-8");
            response.setHeader("content-type", contentType + "; charset=utf-8");
            response.setContentType(contentType + ";charset=utf-8");
            response.setHeader("Content-Disposition", "attachment; filename=" + java.net.URLEncoder.encode(fileName, "UTF-8"));
            response.getOutputStream().write(data);
            response.getOutputStream().flush();
            response.getOutputStream().close();
        } catch (Exception e) { 
   
            e.printStackTrace();
        }
    }

附

获取resources目录下文件，部署可用。

@Autowired
ResourceLoader resourceLoader;

File file = resourceLoader.getResource("classpath:apk/ai.apk").getFile();

常见content-type

.apk：application/vnd.android.package-archive
.jpg：image/jpeg
.zip：application/zip
.docx：application/vnd.openxmlformats-officedocument.wordprocessingml.document
.mp4：video/mp4
.pdf：application/pdf

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/170641.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

https