用户头像的上传以及前端回显_前端上传头像

在开发中，头像上传是一个非常基本的需求，那么如何去完成这个需求呢？本文将从前端到后端完整的讲述设计过程。

前端（使用 react 18）

既然要上传头像，那么我们就需要一个上传文件的标签

<input type="file" id="headImg" />

但是这样放上去后并不美观，看网上的各种点击上传头像都是点击一个区域就可以弹出文件上传的对话框，那么我们要实现这个效果其实也非常简单，用一个盒子来将这个盒子做成自己想要的样式，并添加上 <label> 标签扩大文件上传按钮的受控范围

<label htmlFor="headImg">
     <div className={classes.headImg} id="headImg" style={{backgroundImage: `url(${headImg})`}}  >
         <span>+</span>
     </div>
 </label>

在完成这一步后，原本的文件上传按钮依旧存在，这样看上去还是不美观，所以我们选择将它给隐藏掉，并添加上一个事件，事件触发后就像后端发送请求，将图片文件传递给后端

<input type="file" id="headImg" hidden onChange={uploadImg} />

那么通过以上几步骤后，显示的效果如下图

此时，点击灰色的部分就可以打开选择文件的对话框，并选择你想上传的头像，但选择后头像并不会回显，因为你只是选择了一个文件，而想要将头像回显就需要请求后端传回图片的路径，那么怎么才能实现这样的效果呢？

在发送请求方面，我使用的是 axios，还记得在文件上传标签中放入的事件吗，现在就要来使用了

// 进行头像上传以及回显
  const uploadImg = (e) => {
    const formdata = new FormData();
    formdata.append("headImg", e.target.files[0]);
    axios({
      method: "post",
      url: "http://localhost:8080/scs/system/uploadImg",
      headers: {
        "Content-Type": "multipart/form-data",
      },
      data: {
        multipartFile: formdata.get("headImg"),
      }
    }).then(res => {
      setHeadImg(prevState => res.data.data);
      dispatch(setFlush(1));
      console.log(res);
    }).catch(err => {
      console.log(err);
    })
  }

在使用 axios 发送请求时，可以看到加上了请求头 "Content-Type": "multipart/form-data" ，只有加上这个请求头，后端在解析请求时才能知道这是个文件请求，至于后端为何知道，这个可以查看 springboot 源码，在 springboot 使用 doDispatch 方法的过程中就会完成对请求的解析。在识别到请求头有上述的描述后，就会对请求做一遍封装。而在上述代码中可以看到一个 setFlush 函数，这个函数是我自定义用来刷新状态的，不然当你发送请求后如果不刷新状态，那么你的图片就不会显示，你还需要点击浏览器的刷新按钮来手动刷新页面，至于 setHeadImg 方法就是用来接收图片路径的，还记得我们在盒子中设置的背景图片样式吗，其中使用了模板字符串backgroundImage: `url(${headImg})`，因此可以动态获取你返回的图片路径，到这一步，那么前端的工作就算是完成了。

后端（使用 springboot 3.1.2 版本 ）

在收到前端发来的请求后，并通过解析发现是文件请求后，那么我们在接收传递过来的参数时就需要使用注解 @RequestPart 并且形参类型必须是 MultipartFile 类型，完整的方法签名如下

@PostMapping("/uploadImg")
    public Result uploadImg(@RequestPart("multipartFile") MultipartFile multipartFile)

那么在书写后面的代码前，我们先思考下要如何处理呢？一定要先想，再写。

首先获取文件后，我们可以将文件存储到我们指定的位置，并将该路径返回给前端，但是如果前端发送的文件名相同岂不是会冲突，所以 UUID 势必要使用，它可以生成你看不懂且不会重复的字符串，那现在名称解决了，那就直接返回图片路径给前端！但是如果这样操作你可以想象未来会有什么后果，是不是只要前端发送请求你的后端就会将图片存储到指定目录下而且每个图片名称均不相同，也就是说一个图片会被反复存储，当用户操作的次数越来越多，你的没用的图片文件也会不断增加，甚至你不好清理更不好管理，你不可能将这种不确定是否用户一定使用的路径存储到你数据库中，而你的最终头像显示正是读取你数据库中存储的路径！那么既然预见了这个情况，怎么解决？

可以这样做，将图片放在两个不同的文件夹中，一个用来存储临时的图片，另一个用来存储你真正确认存储的图片，而只有你真正确认存储的图片的路径才存入数据库中，临时存储的图片路径只做一次性返回，不存储。这样，你前端用户在选择一个头像后，后端返回临时存储的地址，你也可以显示出来，而只有当你点击确认后发送请求给后端，后端再将临时的头像文件通过字节流的方式写入确认存储的文件夹中，并将路径放入数据库，以后只要你的用户读取头像，后端就会返回该路径来让前端显示。可是此时新的问题又出现了，一个用户绑定一个图片路径，那当这个用户更换头像后，那以前存储的图片岂不是路径就丢失被荒废在了文件夹中，那这样日积月累，一样会产生非常多的垃圾文件，而且你不好清理，应为这个文件夹放了各个用户的头像。所以怎么解决呢？

有很多方式，你可以为每个用户建一个文件夹，这个用户的头像都放在这个文件夹中，这样用户还可以浏览历史头像。或者你不为每个用户单独建文件夹，你就要所有用户头像都存在一个文件夹中，那么你可以这么操作，每次存入图片时，先将该用户之前存储的图片从路径中删除掉，再将新头像写入。那么本文采用第二种方式。

现在思路有了，延伸的问题也基本解决，接下来就开始写代码吧

头像上传

@PostMapping("/uploadImg")
    public Result uploadImg(@RequestPart("multipartFile") MultipartFile multipartFile) {
        if (!multipartFile.isEmpty()) {
            String path = null;
            try {
                String uuid = UUID.randomUUID().toString().replace("-", "").toLowerCase();
                String originalFilename = multipartFile.getOriginalFilename();
                assert originalFilename != null;
                int indexOf = originalFilename.lastIndexOf(".");
                String substring = originalFilename.substring(indexOf);
                String filename = uuid.concat(substring);
                multipartFile.transferTo(new File("D:\\code\\project\\SmartCampus\\front\\public\\img\\temporary\\"+filename));
                // 响应给前端的文件路径
                path = "/img/temporary/".concat(filename);
            } catch (IOException e) {
                throw new RuntimeException(e);
            }
            return Result.ok(path).message("上传成功");
        }
        return Result.fail().message("上传失败");
    }

代码执行后前端就会获得这个临时存储图片的路径，并显示出来，如下图

在点击确认按钮进行提交后（此处使用的是添加用户的功能做的演示），后端的代码如下

@Override
    public boolean insertStuInfo(Student student) {
 
        if (student.getName() != null && student.getName() != "" && !"null".equals(student.getName()) &&
                student.getGender() != null && student.getGender() != "" && !"null".equals(student.getGender()) &&
                student.getPassword() != null && student.getPassword() != "" && !"null".equals(student.getPassword())) {
            if (student.getEmail() != null && student.getEmail() != "" && !"null".equals(student.getEmail()) &&
                    student.getTelephone() != null && student.getTelephone() != "" && !"null".equals(student.getTelephone()) &&
                    student.getAddress() != null && student.getAddress() != "" && !"null".equals(student.getAddress())) {
                if (student.getIntroducation() != null && student.getIntroducation() != "" && !"null".equals(student.getIntroducation()) &&
                        student.getPortraitPath() != null && student.getPortraitPath() != "" && !"null".equals(student.getPortraitPath()) &&
                        student.getClazzName() != null && student.getClazzName() != "" && !"null".equals(student.getClazzName())) {
 
                    // 临时保存的地址
                    String path = student.getPortraitPath();
                    String relPath = "D:/code/project/SmartCampus/front/public".concat(path);
 
                    // 永久保存的地址
                    String remPath = path.substring(path.lastIndexOf("/"));
                    String remRelPath = "D:/code/project/SmartCampus/front/public/img".concat(remPath);
                    BufferedInputStream bufferedInputStream = null;
                    BufferedOutputStream bufferedOutputStream = null;
                    try {
                        bufferedInputStream = new BufferedInputStream(new FileInputStream(new File(relPath)));
                        bufferedOutputStream = new BufferedOutputStream(new FileOutputStream(new File(remRelPath)));
                        byte[] bytes = new byte[1024];
                        while (bufferedInputStream.read(bytes) != -1) {
                            bufferedOutputStream.write(bytes);
                        }
                        bufferedOutputStream.flush();
                    } catch (IOException e) {
                        throw new RuntimeException(e);
                    } finally {
                        try {
                            bufferedOutputStream.close();
                            bufferedInputStream.close();
                        } catch (IOException e) {
                            throw new RuntimeException(e);
                        }
                    }
 
                    // 存入数据库的路径名称
                    student.setPortraitPath("/img".concat(student.getPortraitPath().substring(student.getPortraitPath().lastIndexOf("/"))));
                    String password = MD5.encrypt(student.getPassword());
                    student.setPassword(password);
                    adminMapper.insertStuInfo(student);
                    if (student.getId() != 0 && student.getId() != null) {
                        return true;
                    }
                }
            }
        }
        return false;
    }

首先我们拿到临时存储的文件，并通过 lastIndex 方法取得图片名称开始的那个 / 在字符串中的下标，通过该下标，我们就可以使用 subString 方法来截取图片的名称。并通过输入流读取当前文件，再通过输出流将文件存储到你真正存储文件的目录下，使用了 IO 流一定要要记得关闭。在存入完成后，只需要将真正存储用户头像的路径存入数据库即可。

至此，后端的工作也完成了，一起看一下最后的效果吧

再来看一下图片存储的临时文件夹里面什么情况

可以看到多且没用，但是现在你可以都删掉，也不会有任何影响啦

再看看真正存储的文件夹里面什么情况

我只给六个用户上传了头像，所以看得见只有六个（最后那个是测试用图片）