【无标题】上传头像

1212爸爸

于 2022-04-02 11:41:21 发布

阅读量81

点赞数

分类专栏：前端 springboot 文章标签： java

本文链接：https://blog.youkuaiyun.com/weixin_44545895/article/details/123916736

版权

前端同时被 2 个专栏收录

6 篇文章

订阅专栏

springboot

5 篇文章

订阅专栏

该博客介绍了前端如何通过`<input type='file'>`监听文件上传事件，并使用FormData进行文件封装，然后调用`upLogo`函数发送到后台。后台采用`@RequestBody MultipartFile`接收文件，将文件内容转换为Base64编码并存储。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <input type="file" value=""  id="file"  @change='onUpLogo'>

onUpLogo(e){
      console.log("触发上传事件！")
      var formData = new FormData();
      formData.append('file', e.target.files[0]);
      upLogo(formData).then((res) => {
          // if (res.data){
          //   this.$message({
          //     message: '更新头像成功!',
          //     type: 'success'
          //   });
          // }else{
          //   this.$message.error('错误！');
          // }
      })
    },

@RequestMapping("/uploadImage.action")
    @ResponseBody
    public ApiResult<Object> uploadImage(@RequestBody MultipartFile file){
        byte[] data = null;
        boolean bool = false;
        File desktopDir = FileSystemView.getFileSystemView().getHomeDirectory();
        try {
            // 读取图片字节数组
            InputStream in = new FileInputStream(desktopDir+"/"+file.getOriginalFilename());
            data = new byte[in.available()];
            in.read(data);
            in.close();
            PakImages pakImages = new PakImages();
            pakImages.setImage(Base64Utils.encodeToString(data));
            bool = pakImagesService.addLogo(pakImages);
            if (bool){
                bool = true;
            }else{
                bool = false;
            }
        }catch (Exception e){
            e.printStackTrace();
        }
        return apiResultComponent.success(bool);
    }