小型深圳网站页面设计,公司做个网站多少钱,wordpress媒体库备份,网站开发是什么职业最近有一需求#xff0c;post请求从前端上传一个文件同时传递一个参数#xff0c;多次实验后记录下两种写法#xff1a;
方法一#xff1a;
前端#xff1a;重点是设置请求头代码如下#xff1a;
getfile(event) {//input框输入文件let file event.target.files[0];l…最近有一需求post请求从前端上传一个文件同时传递一个参数多次实验后记录下两种写法
方法一
前端重点是设置请求头代码如下
getfile(event) {//input框输入文件let file event.target.files[0];let type其他参数//调用上传接口this.$http.post(/upload,{file,type},{headers: {Content-Type: multipart/form-data //重点设置请求头}}).then(res {if (res.data.code 200) {this.$message.success(res.data.message)//上传成功回调} else {this.$message.error(res.data.message)}})
}后端重点是接受传参时不指定 RequestParam 或者 RequestBody代码如下图 PostMapping(value /upload)public ResultString fileUpload( MultipartFile file,String type) throws IOException {//可接收到参数 file 和 type}方法二
前端使用new FormData()进行封装
getFile(event) {let file event.target.files[0];const formData new FormData()formData.append(file,file)formData.append(type, 其他参数)this.$http.post(/upload, formData).then(res {if (res.data.code 200) {this.$message.success(res.data.message)//上传成功回调} else {this.$message.error(res.data.message)}})
}后端 PostMapping(value /upload)public ResultString fileUpload(RequestParam(name file) MultipartFile file,RequestParam(name type, required false) String type) throws IOException {//可接收参数 file 和 type
}
