文件上传功能，使用axios传二进制文件到后台

记录自己使用springboot+vue在开发过程中，解决文件上传的方法
先上效果图：

实现方法思路：

html实现的方法时，修改input type=file的默认类型，将默认类型隐藏；

使用input-group来假装点击了input type=file默认类型；

使用vue的ref和$refs获取file信息；

axios使用formData.append(“file”, file)传二进制文件信息给后端；

没有点击上传头像的话，使用默认的图片作为头像，可浏览我的上一篇博客—>

设置名字的第一个字为默认头像

后端使用@RequestParam(value = “file”, required=false)MultipartFile file接收二进制文件

html部分：

<div class="form-group">
    <label for="recipient-changeUserHeadPortrait" class="col-form-label">头像:</label>

    <div class="input-group">
        <input type="text" class="form-control" placeholder="请上传文件" id="recipient-changeUserHeadPortrait"
               v-model="userData.userHeadPortrait" readonly="true">
        <input style="display: none" type="file" name="file" ref="getChangeFile" @change="clickChangeFile">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button" @click="getChangeFile">
                <span>
                    <img src="../img/file.png" style="width: 16px; height: 16px;">
                    本地上传
                </span>
            </button>
        </span>
    </div><!-- /input-group -->
</div>

js部分：

//要是用new window.FormData();不然会报错
var formData = new window.FormData();
var file = this.$refs.getAddFile.files[0];
var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
if (file != undefined) {
    formData.append("file", file);
}
axios.post('/userInfo/addUserInfo', formData, {
    }).then(function (dat) {
        console.info(dat.data)
        // 操作成功弹出框
        toastr.options = {
            timeOut: 1000,
            positionClass: "toast-top-center",
        };
        toastr.success('添加用户成功')
    });

controller部分：

/**
     * @Author: SmallPang
     * @Description: 添加用户信息
     * @Date: 2019/12/5
     * @Param userInfo: 用户信息
     * @return: com.pang.flower.Model.Result
     **/
    @RequestMapping(value = "/addUserInfo", method = RequestMethod.POST)
    public Result addUserInfo(
        @RequestParam(value = "file", required=false)MultipartFile file,
    ) throws IOException {
        UserInfo userInfo = new UserInfo();
        if (file != null) {
            String src = "http://localhost:8889/";
            String filename = file.getOriginalFilename();
            System.out.println("文件名" + filename);
            // 自定义的文件名称
            String trueFileName = userID + "_" + filename;
            userInfo.setUserHeadPortrait(src + trueFileName);
            String path = "G:\\nginx\\img\\" + trueFileName;
            File dest = new File(path);
            if (!dest.getParentFile().exists()) {
                System.out.println("文件路径不存在");
            }
            file.transferTo(dest);
        } else {
            System.out.println("文件为空");
        }
        return userInfoService.addUserInfo(userInfo);
    }

service层的代码就不展示了，也就是操作数据库，将上传的图片在nginx图片服务器保存的路径存储在mysql数据库而已

因为知识展示了部分代码的原因，有不清楚的地方可以在下面评论我，我最近都会在管理我的blog，看到我都会回复你们的