文件上传携带参数

最新推荐文章于 2024-08-27 08:30:00 发布

原创最新推荐文章于 2024-08-27 08:30:00 发布 · 473 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ajax

前端专栏收录该内容

1 篇文章

订阅专栏

文章讲述了在前端进行文件上传时如何附加参数。通过使用FormData对象，可以将文件和额外参数如id一起发送。在文件读取完成后，使用Ajax以POST方式提交到后台。后端通过MultipartFile和HttpServletRequest接收上传的文件和参数。

前端文件上传时，无法携带参数，找了很多教程，才找到答案，记录一下

使用fromData的append拼接

let fileObj = document.getElementById("image").files[0];
let formFile = new FormData();
formFile.append("file", fileObj);
formFile.append("id", '10001');
let reader = new FileReader();
reader.readAsDataURL(fileObj);
reader.onload = function (e) {
    //初始化JavaScript图片对象
    const image = new Image();
    //FileReader获得Base64字符串
    image.src = e.target.result;
    image.onload = function () {
        //获得图片高宽
        let height = this.height;
        let width = this.width;
        if (height === 80 && width === 80) {
            $.ajax({
                method: 'POST',
                url: path + '/api/upload',
                data: formFile,
                processData: false,
                contentType: false,
                success: function (res) {
                    console.log(res);
                }
            })
        }
    };
}

后端接收参数，如下

@RequestMapping("/upload")
    public String uploadLogoImage(MultipartFile file,String id, HttpServletRequest request) {
        String fileName = file.getOriginalFilename();
        
}