> 文档中心 > 记一次前后端分离项目中---关于文件上传解决的思路

记一次前后端分离项目中---关于文件上传解决的思路

记一次前后端分离项目中---关于文件上传解决的思路

  • 前言
  • 一、首先了解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;    }}

五、最后成功上传

在这里插入图片描述
在这里插入图片描述


七、还有一点,别忘了部署虚拟目录

在这里插入图片描述
在这里插入图片描述

如果你觉得对你有用,欢迎点点关注,多多支持