文件上传和文件储存(springboot+vue)

问题?

文件有大有小,这就有了带宽的问题
解决方法: 使用单独的模块(这是vue)

使用技术?

springboot+vue完成最基本的文件上传
1、vue
在上传的点击按钮中把input标签的type设置为file,使它变成一个文件组件
文件上传和文件储存(springboot+vue)_第1张图片
特点:文件组件没有数据绑定,否则页面会报错
文件上传和文件储存(springboot+vue)_第2张图片

vue中把文件传到后端去?

怎么触发这个动作(传到后端的这个动作)
文件上传和文件储存(springboot+vue)_第3张图片
方法一
增加按钮
方法二
直接在这个控件上增加一个事件监听;当这个控件的值发生变化的时候,就去触发上传的动作
在vue中的input标签中增加一个change
文件上传和文件储存(springboot+vue)_第4张图片
这个change的值时一个方法;然后在这个方法里做具体的跟后端的交互
文件上传和文件储存(springboot+vue)_第5张图片
首先要定义一个FormData,使用表单的方式来提交图片
在这里插入图片描述
往FormData里方图片
在这里插入图片描述
在input标签中增加一个id,值为file-upload-input(也就是上面的往FormData里传图片中的值)
在这里插入图片描述
文件上传和文件储存(springboot+vue)_第6张图片
以上步骤做完之后就拿到了图片
接着就把这张表单提交到后端
文件上传和文件储存(springboot+vue)_第7张图片
后端预留了以下的一个请求
文件上传和文件储存(springboot+vue)_第8张图片
还增加了show和hide的等待宽
文件上传和文件储存(springboot+vue)_第9张图片
最后拿到了结果
文件上传和文件储存(springboot+vue)_第10张图片

后端

新建一个Controller
文件上传和文件储存(springboot+vue)_第11张图片
接下来写upload方法
用@RequestParam来接收file变量
文件上传和文件储存(springboot+vue)_第12张图片
因为我们的文件是一个富文本,也就是图片;所以我们要用MultiparFile
文件上传和文件储存(springboot+vue)_第13张图片
返回值用ResponseDto
文件上传和文件储存(springboot+vue)_第14张图片

保存文件
保存文件用以下代码
出现异常要抛出去
文件上传和文件储存(springboot+vue)_第15张图片
接收传过来的文件FileName
文件上传和文件储存(springboot+vue)_第16张图片
并且生成一个8位的uuid(短id)
目的:防止同一张图片传多次,出现错误,加了uuid,这样就可传多个一样的图片
文件上传和文件储存(springboot+vue)_第17张图片
然后定义一个本地的路径
文件上传和文件储存(springboot+vue)_第18张图片
注释:如果不加短id,上传的文件名极可能重复,文件就会互相覆盖;
注意:文件名一样不代表文件就是一样的,因为有短id

接着用java自带的File生成一个目标位置dest
文件上传和文件储存(springboot+vue)_第19张图片
然后把vue传过来的file写到目标位置
文件上传和文件储存(springboot+vue)_第20张图片

你可能感兴趣的:(文件上传和文件储存(springboot+vue))