记一次前后端分离项目中---关于文件上传解决的思路
记一次前后端分离项目中---关于文件上传解决的思路
- 前言
- 一、首先了解ElementUI中几个标签属性的作用
- 二、点击上传服务器按钮触发事件submitUpload()
-
- 2.1此事件做两件事:
- 三、myUpload函数
-
- 3.1myUpload函数做三件事:
- 四、后端处理请求
- 五、最后成功上传
- 七、还有一点,别忘了部署虚拟目录
前言
项目模块为添加课程模块,添加课程里面需要上传课程图片和课程视频,接下来说说如何处理手动上传文件的思路
一、首先了解ElementUI中几个标签属性的作用
:auto-upload=“false” 属性的值为Boolean,false为取消文件自动上传
:http-request=“myUpload” 覆写文件上传行为,当:auto-upload="false"时生效
@click=“submitUpload(1)” 绑定事件,方法名为submitUpload(),参数为1
前端页面图
二、点击上传服务器按钮触发事件submitUpload()
2.1此事件做两件事:
- 判断上传的是图片还是视频
- 调用文件上传的函数myUpload()
代码如下:
submitUpload(value) { //value是一个写死的数字,1为图片,2为视频 if(value==1){ //调用sumbit()会自动触发:http-request这个属性绑定的方法---myUpload() this.$refs.upload1.submit() }else{ this.$refs.upload2.submit() }},
三、myUpload函数
3.1myUpload函数做三件事:
- 需要对后端传参
- 接收后端返回来的结果集
- 同时显示上传的图片或者视频的预览图
代码如下:
myUpload(content) { //请求参数这里引用一种新用法---FormDate()一种表示表单数据键值对的接口 let data = new FormData() data.append("upload",content.file) axios.post(`http://localhost/course?method=uploadCourse`,data) .then(resp=>{ //console.log(resp.data); if(resp.data.code==201){//状态码201就是图片 // /upload是部署在服务器的虚拟目录后面再拼接文件名,就可以显示了 this.dialogImageUrl = 'http://localhost/upload/'+resp.data.data }else{ this.dialogVedioUrl = 'http://localhost/upload/'+resp.data.data } }) },
四、后端处理请求
- @MultipartConfig注解负责解析表单二进制数据
- getPart()方法获得请求中表单二进制数据
- getSubmittedFileName()获得请求中传过来的文件的文件名
- 调用Part类的write方法对文件数据进行本地保存
- getContentType()获取文件类型
- 结果集ResultVO负责记录状态信息并返回给前端
代码如下:
@WebServlet("/course")@MultipartConfigpublic class CourseServlet extends BaseServlet { /** * 上传文件 * @param req * @param resp * @throws ServletException * @throws IOException */ protected void uploadCourse(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { ResultVO resultVO = null; //获取文件二进制数据 Part upload = req.getPart("upload"); //获取文件名 String fileName = upload.getSubmittedFileName(); //System.out.println(fileName); //写入硬盘 upload.write("D:/upload/"+fileName); //现在服务器不知道上传的是图片还是视频 //getContentType(),可以获得文件类型 if(upload.getContentType().contains("image")){ //返回文件名的话。还是辨别不了文件类型 //resp.getWriter().print(fileName);---这段代码舍弃 //使用结果集,将一些信息封装之后再返回 resultVO = new ResultVO(201, "上传的是图片", fileName); }else{ resultVO = new ResultVO(202,"上传的是视频",fileName); } resp.getWriter().print(ObjectMapperWriter.writer(resultVO)); }}
结果集ResultVO代码如下:
public class ResultVO { private int code; //状态码 private String message;//提示信息 private Object data; //数据 public ResultVO() { } public ResultVO(int code, String message, Object data) { this.code = code; this.message = message; this.data = data; } public int getCode() { return code; } public void setCode(int code) { this.code = code; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } public Object getData() { return data; } public void setData(Object data) { this.data = data; }}
五、最后成功上传
七、还有一点,别忘了部署虚拟目录
如果你觉得对你有用,欢迎点点关注,多多支持