SpringBoot图片上传

Posted 2021-10-30 zbjj-itblog

毕设终于写到头像上传了,本来想用Vue写来着,但是一直不顺利,还是对Vue用的不太熟.所以就用jquery写了.

首先添加以下标签

<img id="avatarPreview" :src="user.avatar"  title="点击更换图片" />
<input id="upload"  name="file" type="file" accept="image/png,image/gif,image/jpeg,image/jpg" />
<button type="button" id="uploadphoto">上传</button>

接下添加点击事件

<script type="text/javascript">
    $(function () {
        $("#uploadphoto").hide();
        //点击选择文件按钮显示上传按钮
         $("#upload").click(function () {
             $("#uploadphoto").show();
         })
        $(‘#uploadphoto‘).click(function () {
            $("#uploadphoto").hide();
             var file = document.getElementById("upload").files[0]
             var param = new FormData()  // 创建form对象
             param.append(‘file‘, file)  // 通过append向form对象添加数据
             var config = {
                 // 添加请求头 向后台传入token,  这个multipart/form-data必需

                    headers: {‘Content-Type‘: ‘multipart/form-data‘,

                              ‘Authorization‘: ‘Bearer ‘ + getUser().token}
                    }
            axios.post(‘http://localhost:9002/user/uploadAvatar‘, param, config)
                .then(res => {
                    if(res.data.flag){
                        vm.$data.user.avatar=res.data.data.url;
                    }
                }).catch(res=>{
                console.log(res)
            })
        })
    })
</script>

后端:

//头像上传
@PostMapping("/uploadAvatar")
public Result uploadAvatar(@PathVariable MultipartFile file){
//判断token的代码就省略了
        if(file.isEmpty()){
            return new Result(false,StatusCode.ERROR,"请选择文件");
        }
        String fileName = file.getOriginalFilename();//文件名
        String suffixName = fileName.substring(fileName.lastIndexOf("."));//后缀名
        String path = "E:/workspace/JavaEEWeb/tsemap-parent/tsemap-user/src/main/resources/static/img"; //文件存储位置  我放在了我的项目下
        fileName=UUID.randomUUID()+suffixName;//图片名

        File dest = new File(path+"/"+fileName);
        if (!dest.getParentFile().exists()) {
            dest.getParentFile().mkdirs();
        }
        try {
            file.transferTo(dest);
            String url="./img/"+fileName;
            Map map=new HashMap();
            map.put("url",url);
            return new Result(true,StatusCode.OK,"上传成功",map);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return new Result(false,StatusCode.ERROR,"上传失败");
}

效果大概就是这样:

点击上传:

大概就是这样吧 bug还是有 后续等整个毕设写完了再改细节吧