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

最新推荐文章于 2024-10-23 16:29:07 发布

Small_Pang

最新推荐文章于 2024-10-23 16:29:07 发布

阅读量5k

点赞数 2

分类专栏： springboot JS html 文章标签： java

本文链接：https://blog.csdn.net/Small_Pang/article/details/103662233

版权

springboot 同时被 3 个专栏收录

7 篇文章

订阅专栏

6 篇文章

订阅专栏

html

5 篇文章

订阅专栏

记录自己使用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);
    }