开始

点击头像选择 图片上传

image.png

image.png

前端

image.png
上传事件
image.png

  1. uploadFace(e) {
  2.                         // let $target = e.target || e.srcElement;
  3.                         // let file = $target.files[0];
  5.                         let f = document.getElementById('userFace').files[0];
  6.                         // console.log(f);
  7.                         let multiForm = new FormData() ;         //创建一个form对象
  8.                         multiForm.append('file', f, f.name);      //append 向form表单添加数据
  10.                         var userInfo = this.userInfo;
  11.                         // console.log(userInfo);
  12.                         // 请求后端获得最新数据
  13.                         var serverUrl = app.serverUrl;
  14.                         axios.defaults.withCredentials = true;
  15.                         axios.post(
  16.                                 serverUrl + '/userInfo/uploadFace?userId=' + userInfo.id, 
  17.                                 multiForm, 
  18.                                 {
  19.                                     headers: {
  20.                                         'Content-Type': 'multipart/form-data',
  21.                                         'headerUserId': userInfo.id,
  22.                                         'headerUserToken': userInfo.userUniqueToken
  23.                                     }
  24.                                 })
  25.                             .then(res => {
  26.                                 if (res.data.status == 200) {
  27.                                     // var userInfoMore = res.data.data;
  28.                                     // console.log(userInfoMore);
  29.                                     alert("头像上传成功!");
  31.                                     window.location.reload();
  32.                                 } else {
  33.                                     alert(res.data.msg);
  34.                                     console.log(res.data.msg);
  35.                                 }
  36.                             });
  37.                     },

前端js用的异步的方式去上传。首先去获取文件
image.png
创建一个form对象，里面放了一个file。f就是文件的内容，
image.png
headers里面设置上传的内容的类型。涉及到文件上传就必须设置multipart
image.png
就像，我们以前在写jsp的时候，form表单必须要设置enctype里面必须是multipart，如果form里面有文件上传的话，后端才能获取到。
image.png

image.png

后端代码

文件的上传

image.png
这样这个文件就以参数的形式接收了
image.png

image.png

继承baseController
image.png

image.png
我在windows下要存的路径是：
D:\demos\upload

   // 在windows上我们要存的路径是：D:\\demos\\upload 那么就把斜线都换成了File.separator为了兼容不同的操作系统
    public static final String IMAGE_USER_FACE_LOCATION= "D:"+File.separator+"demos"+File.separator+"upload";

本机电脑保存的路径
image.png
路径第一个/在windows和mac电脑下是不一样的
image.png
兼容两个系统
image.png

使用File.separator来替代第一个斜线
image.png
每一个斜线 都用File.separator来替代
image.png
可以看下separator的源码
image.png

image.png
fs是一个FileSystem
image.png
当前的默认操作系统。
image.png

在unix和macOS下是一个斜杠
image.png
在windows下就是两个反斜线
image.png
image.png

image.png

 // 定义头像保存的地址
        String fileSpace=IMAGE_USER_FACE_LOCATION;
        //在路径上位每一个用户增加一个userId 用于区分不同用户上传
        String uploadPathPrefix = File.separator+userId;
        // 开始上传
        if(file!=null){

        } else {
            return IMOOCJSONResult.errorMsg("文件不能为空！");
        }

结束