使用Vue Cli2 + ElementUI
1.1.1 展示样式介绍 使用el-table展示列表，关键属性是 :data 绑定里面所有行数据【tableData是自定义的一个变量】el-table只需要我们设计表头，数据会根据我们定义的一个数组变量内容自动加载，但只有加载el-table有的字段使用相关标签是为了自定义表头，相关样式可以去elementUI官网学习。效果如下：
代码如下：【值得注意的就是min-width=100%，很好用】
<el-table v-loading="loading" :data="tableData" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}" max-height="1080" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" v-contextmenu:contextmenu>
<el-table-column prop="name" label="文件名" min-width="100%">
<template slot="header">
<i class="el-icon-document hidden-xs-only">i>
<span>文件名span>
<el-upload class="upload" action="/file/uploadFile" :data="data" multiple :show-file-list="false" :before-upload="beforeUpload">
<el-button size="small" type="primary">点击上传el-button>
el-upload>
template>
el-table-column>
<el-table-column prop="lastModifyTime" label="修改时间" sortable width="180">
<template slot="header">
<span>修改时间span>
template>
el-table-column>
<el-table-column prop="size" label="大小" sortable width="180">
<template slot="header">
<span>大小span>
template>
el-table-column>
<el-table-column prop="operation" label=" *** 作" width="180">
<template slot-scope="scope">
<el-button type="text" icon="el-icon-download">el-button>
<el-button type="text" icon="el-icon-close" @click="confirm">el-button>
template>
el-table-column>
el-table>
this.$http.post("/file/showAllFiles", {
curUrl: "\d\c",
uid: 9
}).then((res) => {
this.tableData = res.data;
});
@PostMapping("/showAllFiles")
@ResponseBody
/**
* @param uid 表示用户id
* @param curUrl 表示当前所在的文件夹位置，返回该文件夹下的所有文件
* 注意该接口只对文件夹有效
*/
public List showAllFiles(@RequestBody Map<String, String> map) {
String localUrl = store + map.get("uid") + map.get("curUrl");
System.out.println(localUrl);
List<FileInfo> res = fileService.showAllFiles(localUrl);
return res;
}
/**
* @param curUrl 传入的是本地绝对路径
*
* @return 返回当前目录下的所有FileInfo（不包括子代）
* info内容包括文件/目录名，后缀，文件大小，文件最后修改时间（已经格式化），是否是目录
*/
@Override
public List<FileInfo> showAllFiles(String curUrl) {
File dir = new File(curUrl);
//先判断文件夹是否存在
if(!dir.exists()) {
System.out.println("目录不存在");
return null;
}
//获取文件列表
File[] fileList = dir.listFiles();
//FileInfo是我自定义的一个实体类，把文件中我需要的信息注入作为一个单位返回
List<FileInfo> res = new ArrayList<>();
DateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
for(File file : fileList) {
//如果是目录，不加入大小，默认“-”
if(file.isDirectory()) {
res.add(new FileInfo(file.getName()," ", "-", df.format(new Date(file.lastModified())), 1));
}else {
String name = file.getName();
//得到的结果是B，字节
double len = Double.valueOf(file.length());
String size = "";
if(len < 1024) {
size = "" + String.format("%.2f", len) + "b";
}else if(len >= 1024 && len < 1048576) {
size = "" + String.format("%.2f", len/1024) + "kb";
}else if(len >= 1048576 && len < 1073741824) {
size = "" + String.format("%.2f", len/1048576) + "mb";
}
res.add(new FileInfo(name, name.substring(name.lastIndexOf(".")+1), size, df.format(new Date(file.lastModified())), 0));
}
}
}
return res;
}
访问用户9的\d\c\a位置
刷新页面，渲染vue组件时自动请求showAllFiles接口
成功访问
2. 新建文件夹模拟 2.1 前端前端直接提供一个按钮去访问对应接口就行，这里不演示。
2.2 后端 2.2.1 Controller 同理接收body参数，所以用map和RequestBody需要知道是哪位用户（uid）在哪里新建（curUrl），找到对应的本地路径@PostMapping("/newFolder")
@ResponseBody
/**
* @param curUrl 表示当前创建的文件夹所在的位置
*/
public Integer newFloder(@RequestBody Map<String, String> map) {
String localUrl = store + map.get("uid") + map.get("curUrl");
int res = fileService.newFolder(localUrl);
return res;
}
@Override
public Integer newFolder(String localUrl) {
//创建本地文件夹,curUrl应该包含name
try{
Files.createDirectories(Paths.get(localUrl));
return 1;
}catch (IOException e){
e.printStackTrace();
return 0;
}
}
值得注意的是：我们需要在注册的时候，先为当前注册成功的用户创建一个专属文件夹。
2.3 效果展示模拟接口
查看结果【创建成功】
这里要提醒，需要学习form-data和multipart
3.0 form-data和multipartenctype：一个html表单的post请求过程中enctype【中文是编码方式】有三种类型
Content-Type：用于定义用户的浏览器或相关设备如何显示将要加载的数据，或者如何处理将要加载的数据
application/x-www-urlencoded
编码方式是ASCII是最普通的post编码，数据会被编码到body中传输表单默认是这个multipart/form-data【其实了解他是个传文件的就差不多了】
是基于post方法来传递二进制数据的，一般能用来传递文件
如图，解释一下，每一行的一个------WebKitFormBoundarynRpsHcUvTeBqpdsH是一个boundary，是可以自定义的，是一个分隔符，你就当他用来分隔各个参数的就行了，有头有尾。
参数名与参数值之间会有两行换行，这是官方规定的格式，照着了解就行。
整体格式总结
--分隔符(boundary)[换行]
Content-Disposition: form-data; name="参数名"[换行]
[换行]
参数值[换行]
--分隔符(boundary)[换行]
Content-Disposition: form-data; name="图片名"; filename="图片文件名"[换行]
Content-Type: 类型[换行]
[换行]
图片文件的二进制内容[换行]
--分隔符(boundary)--
使用Vue Cli2 + ElementUI
使用el-upload进行用户本地文件选取以及自动上传注意使用multiple，不然一个用户只能传一个文件注意也不要添加limit参数默认就是自动上传这里比较关键是data是能传入额外参数，而我们后端需要知道uid和当前路径注意这里使用的是el组件的action，data是属于query参数，直接拼在url后的，后端能直接用@RequestParam
点击上传
选择文件上传即可。 3.2 后端 3.2.1 Controller 不多说了前端data是属于query参数，直接拼在url后的，后端能直接用@RequestParam
@PostMapping("/uploadFile")
@ResponseBody
public Integer uploadFile(@RequestParam("curUrl") String curUrl, @RequestParam("uid") Integer uid,@RequestParam("file") MultipartFile file) {
String localUrl = store + uid + curUrl;
fileService.uploadFile(file, localUrl);
return 1;
}
@Override
public Integer uploadFile(MultipartFile file, String curUrl) {
MultipartFileUtil.addFile(file, curUrl);
return 1;
}
spring:
# web处理multipart请求懒加载
servlet:
multipart:
resolve-lazily: true
#设置单个文件大小，单位MB和KB都可以
max-file-size: 1000MB
#设置总上传的数据大小，单位MB和KB都可以
max-request-size: 10000MB
tomcat:
max-swallow-size: 100MB
比较重要的就是获取multipartFile的文件名file.getOriginalFilename();
剩下考察你对文件IO流熟不熟悉，这里采用一个手动缓存读写。
毕竟都是二进制而已，直接读写即可。
源码，可以直接复制使用
import org.springframework.web.multipart.MultipartFile;
import java.io.*;
public class MultipartFileUtil {
public static void addFile(MultipartFile file,String uri){
OutputStream outputStream = null;
InputStream inputStream = null;
String fileName = null;
try {
inputStream = file.getInputStream();
fileName = file.getOriginalFilename();
//log.info("fileName="+fileName);
} catch (IOException e) {
e.printStackTrace();
}
try {
// 2、保存到临时文件
// 1K的数据缓冲
byte[] bs = new byte[1024];
// 读取到的数据长度
int len;
// 输出的文件流保存到本地文件
File tempFile = new File(uri);
if (!tempFile.exists()) {
tempFile.mkdirs();
}
//跨平台写法，windows和linux都适用
outputStream = new FileOutputStream(tempFile.getPath() + File.separator + file.getOriginalFilename());
// 开始读取和写入os
while ((len = inputStream.read(bs)) != -1) {
outputStream.write(bs, 0, len);
}
} catch (IOException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
} finally {
// 完毕，关闭所有链接
try {
outputStream.close();
inputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
前端选择文件，确定后自动上传
本地查看文件是否下载成功【成功下载到本地】
刷新页面
el-table的一个min-width=100%使用解决表头问题
@RequestParam 或者 直接参数对应需要前端发送的请求参数是query参数【1对1】
如果前端请求参数是body参数【json串】，后端要使用@RequestBody，配合map或者实体类进行接收
file.length是文件大小
前后端对接的时候上传文件使用multipart/form-data，就是通过二进制流传递文件，el-upload能通过:data去传递额外参数
多使用工具类封装
通过配置文件处理multipart文件上传大小限制
搞文件系统当然要想到用File包
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）