继续上一篇文章，有需要的同学请关注查看文章
1、单个文件上传
/**
* 通用上传请求（单个）
*/
@PostMapping("/upload")
public AjaxResult uploadFile(MultipartFile file) throws Exception
{
try
{
// 上传文件路径
String filePath = RuoYiConfig.getUploadPath();
// 上传并返回新文件名称
String fileName = FileUploadUtils.upload(filePath, file);
String url = serverConfig.getUrl() + fileName;
AjaxResult ajax = AjaxResult.success();
ajax.put("url", url);
ajax.put("fileName", fileName);
ajax.put("newFileName", FileUtils.getName(fileName));
ajax.put("originalFilename", file.getOriginalFilename());
return ajax;
}
catch (Exception e)
{
return AjaxResult.error(e.getMessage());
}
}如上述图，控制类的入参是MultipartFile file，存放上传文件相关的数据，下面对MultipartFile详细解析
2、MultipartFile定义
MultipartFile为org.springframework.web.mutipart包下的一个类，也就是说如果想使用MultipartFile这个类就必须引入spring框架，换句话说，如果想在项目中使用MultipartFile这个类，那么项目必须要使用spring框架才可以，否则无法引入这个类。MultipartFile翻译成中文来讲就是“多组件的文档”，不用太在乎他的中文含义，一般来讲使用MultipartFile这个类主要是来实现以表单的形式进行文件上传功能
3、MultipartFile常用方法解析
????首先MultipartFile是一个接口，并继承自InputStreamSource，且在InputStreamSource接口中封装了getInputStream方法，该方法的返回类型为InputStream类型，这也就是为什么MultipartFile文件可以转换为输入流。通过以下代码即可将MultipartFile格式的文件转换为输入流。
multipartFile.getInputStream();(1).getName方法
????getName方法获取的是前后端约定的传入文件的参数的名称，在SpringBoot后台中则是通过@Param("uploadFile") 注解定义的内容。值得一提的是，我们来看一下该方法的注释，如下图2.1所示：
从上图的return中可以看出，返回的name值从来不是null或者空，也就是说如果使用MultipartFile来接收文件，那么@Param("uploadFile")定义的接收文件的名称则必不可少，这样才能接收到文件，如果没有定义@Param("uploadFile")，则接收不到文件。
(2).getOriginalFileName方法
????getOriginalFileName方法获取的是文件的完整名称，包括文件名称+文件拓展名。
(3).getContentType方法
????getContentType方法获取的是文件的类型，注意是文件的类型，不是文件的拓展名。
(4).isEmpty方法
????isEmpty方法用来判断传入的文件是否为空，如果为空则表示没有传入任何文件。
(5).getSize方法
????getSize方法用来获取文件的大小，单位是字节。
(6).getBytes方法
????getBytes方法用来将文件转换成一种字节数组的方式进行传输，会抛出IOException异常。
(7).getInputStream方法
????getInputStream方法用来将文件转换成输入流的形式来传输文件，会抛出IOException异常。
(8).transferTo方法
????transferTo方法用来将接收文件传输到给定目标路径，会抛出IOException、IllegalStateException异常。该方法在实际项目开发中使用较少。
????我们以上传一张图片文件为例，分别来看一下调用不同方法所获取到的数据，如下图2.2所示：
3、FileUploadUtils.upload保存文件详解
FileUploadUtils.upload(filePath, file);函数有两个参数，filePath是服务器存储的路径。file是上传的文件对象，详细实现代码片段如下：
/**
* 根据文件路径上传
*
* @param baseDir 相对应用的基目录
* @param file 上传的文件
* @return 文件名称
* @throws IOException
*/
public static final String upload(String baseDir, MultipartFile file) throws IOException
{
try
{
return upload(baseDir, file, MimeTypeUtils.DEFAULT_ALLOWED_EXTENSION);
}
catch (Exception e)
{
throw new IOException(e.getMessage(), e);
}
}/**
* 文件上传
*
* @param baseDir 相对应用的基目录
* @param file 上传的文件
* @param allowedExtension 上传文件类型
* @return 返回上传成功的文件名
* @throws FileSizeLimitExceededException 如果超出最大大小
* @throws FileNameLengthLimitExceededException 文件名太长
* @throws IOException 比如读写文件出错时
* @throws InvalidExtensionException 文件校验异常
*/
public static final String upload(String baseDir, MultipartFile file, String[] allowedExtension)
throws FileSizeLimitExceededException, IOException, FileNameLengthLimitExceededException,
InvalidExtensionException
{
int fileNamelength = Objects.requireNonNull(file.getOriginalFilename()).length();
if (fileNamelength > FileUploadUtils.DEFAULT_FILE_NAME_LENGTH)
{
throw new FileNameLengthLimitExceededException(FileUploadUtils.DEFAULT_FILE_NAME_LENGTH);
}
assertAllowed(file, allowedExtension);
String fileName = extractFilename(file);
String absPath = getAbsoluteFile(baseDir, fileName).getAbsolutePath();
file.transferTo(Paths.get(absPath));
return getPathFileName(baseDir, fileName);
}
其中将上传的文件二进制数据流保存到本地文件的关键方法是：file.transferTo(Paths.get(absPath));?transferTo方法用来将接收文件传输到给定目标路径，会抛出IOException、IllegalStateException异常。
4.前端上送单文件代码分析
组件封装路径
/src/components/ImageUpload/index<!-- 上传提示 -->
<div class="el-upload__tip" slot="tip" v-if="showTip">
请上传
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
的文件
</div>data() {
return {
number: 0,
uploadList: [],
dialogImageUrl: "",
dialogVisible: false,
hideUpload: false,
baseUrl: process.env.VUE_APP_BASE_API,
uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
headers: {
Authorization: "Bearer " + getToken(),
},
fileList: []
};
},其中uploadImgUrl对应上面讲到的服务器保存上传文件的控制类url地址。
上传组件使用el-upload
<el-upload
multiple
:action="uploadImgUrl"
list-type="picture-card"
:on-success="handleUploadSuccess"
:before-upload="handleBeforeUpload"
:limit="limit"
:on-error="handleUploadError"
:on-exceed="handleExceed"
ref="imageUpload"
:on-remove="handleDelete"
:show-file-list="true"
:headers="headers"
:file-list="fileList"
:on-preview="handlePictureCardPreview"
:class="{hide: this.fileList.length >= this.limit}"
>
<i class="el-icon-plus"></i>
</el-upload>:action="uploadImgUrl" //表示上传服务器的地址
:on-success="handleUploadSuccess" //将上传的图片成功后回调的函数，例如上传图片成功后，获取图片的url地址，可以界面上面进行显示，如下代码片段
handleUploadSuccess(res, file) {
if (res.code === 200) {
this.uploadList.push({ name: res.fileName, url: res.fileName });
this.uploadedSuccessfully();
} else {
this.number--;
this.$modal.closeLoading();
this.$modal.msgError(res.msg);
this.$refs.imageUpload.handleRemove(file);
this.uploadedSuccessfully();
}
},处理成功后，将res.fileName和res.fileName存储到this.uploadList数组里面。
未来计划
1、ruoyi非分离版本拆解
2、ruoyi-vue-pro：讲解工作流
3、ruoyi-vue-pro：支付模块，电商模块
4、基于ruoyi-vue-pro项目开发
5、JEECG低代码开发平台
请关注我，本星球会持续推出更多的开源项目代码解析，如有更好的意见请留言回复或者私信。