文件上传携带参数

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

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

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

使用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();
        
}    

### 实现Spring Boot文件上传同时传递其他参数 在构建基于Spring Boot的应用程序时,有时需要在同一请求中既上传文件又提交额外的数据。这可以通过使用`MultipartFile`对象来处理文件,并利用表单数据绑定机制来接收附加参数。 #### 创建控制器以接受文件和其他字段 为了支持这种场景,在控制器的方法签名里可以定义多个形参:一部分用于获取文件流(`MultipartFile`);另一部分则用来捕获其他的输入项(比如字符串类型的属性)。下面是一个具体的例子: ```java import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.MultipartFile; @RestController @RequestMapping("/upload") public class FileUploadController { @PostMapping("/withParams") public String handleFileUpload(@RequestParam("file") MultipartFile file, @RequestParam("name") String name){ // Handle the uploaded file and other parameters here. System.out.println("Received file named " + file.getOriginalFilename()); System.out.println("Additional parameter 'name': " + name); return "Successfully received!"; } } ``` 上述代码片段展示了如何创建一个RESTful端点[^2],它能够接收一个多部件HTTP POST请求,其中不仅包含了待存储的文档资源,还携带了一个名为"name"的文字串作为辅助信息的一部分。 #### 前端HTML表单设计 为了让客户端发送带有附件以及其它表单项的内容给服务器端,应当准备一份适当构造过的HTML `<form>`标签。这里给出一段示范性的HTML源码,其作用是指定目标URL地址为"/upload/withParams", 并采用POST方式递交资料,同时允许用户挑选本地磁盘上的某个档案连同填写姓名一同上载至后台服务: ```html <form action="/upload/withParams" method="post" enctype="multipart/form-data"> Select file to upload: <input type="file" name="file"><br/> Enter your name: <input type="text" name="name"/><br/><br/> <button>Submit</button> </form> ``` 这段HTML确保了当用户点击按钮后会触发一次包含有文件和文本域值在内的网络传输操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值