javascript - 重定向在springboot控制器中不起作用
问题描述
我正在使用 javascript 制作一个上传图像的表单,这是唯一在应用程序中不起作用的重定向,我还没有找到更好的上传图像的方法,我想将它存储在数据库中。我需要该重定向才能工作。
这是 html 代码(我没有使用来自 thymeleaf 的对象发布):
<form id="singleUploadForm" name="singleUploadForm" class="form-horizontal" th:object="${publication}">
...
<div class="form-group">
<label class="control-label col-sm-2" for="text"
th:text="#{publication.image}">Imagen (opcional):</label>
<div class="col-sm-10">
<input id="singleFileUploadInput" type="file" class="form-control" name="image"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" th:text="#{send}">Enviar</button>
</div>
</div>
</form>
这是我的 Javascript 代码:
'use strict';
var singleUploadForm = document.querySelector('#singleUploadForm');
var singleFileUploadInput = document.querySelector('#singleFileUploadInput');
var titleInput = document.querySelector('#titleInput');
var textInput = document.querySelector('#textInput');
function uploadSingleFile(file, text, title) {
var formData = new FormData();
formData.append("file", file);
formData.append("text", text);
formData.append("title", title);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/uploadFile");
xhr.onload = function() {
//console.log(xhr.responseText);
}
xhr.send(formData);
console.log("DONE1");
}
singleUploadForm.addEventListener('submit', function(event){
var files = singleFileUploadInput.files;
var text = textInput.value;
var title = titleInput.value;
if(files.length === 0) {
uploadSingleFile(null, text, title);
}
else {
uploadSingleFile(files[0], text, title);
//event.preventDefault();
console.log("DONE2");
}
console.log("DONE3");
}, true);
还有控制器:
@RequestMapping(value = "/uploadFile")
public String uploadFile(Principal principal, @RequestParam(value = "file", required=false) MultipartFile image,
@RequestParam("text") String text, @RequestParam("title") String title) {
Publication publication = new Publication();
if (image != null) {
DBFile dbFile = storageService.storeFile(image);
publication.setImage(dbFile);
}
User user = usersService.getUserByEmail(principal.getName());
publication.setUser(user);
publication.setDate(new Date());
publication.setText(text);
publication.setTitle(title);
publicationsService.addPublication(publication);
return "redirect:/publication/list";
}
如果有任何方法可以将图像添加到 de th:object="{$publication}" 我认为它会解决问题,但是当我尝试这样做时,我总是收到一个空文件。如果我使用字符串来保存图像,我会正确接收名称,但无法获取任何形式的数据。
解决方案
您所期望的实际上并不正确。
对于 Ajax 调用,从控制器返回 json 响应,根据控制器返回的响应,您可以重定向到 javascript 代码中的特定 url。参考如何重定向Ajax spring
window.location.href = 'http://www.google.com'; //Will take you to Google.
推荐阅读
- react-native - Expo遇到致命错误:错误:需要未知模块“./locale/en-us”
- windows - odbc dsn-less 连接字符串错误 IM002
- python - 通过命令行从 Snakemake 工作流的 python 可执行文件指定目标规则
- kubernetes - 在 Helm 图表中组合字符串和变量
- javascript - JavaScript 访问局部变量
- c++ - c++构造函数lnk2019未解析的外部符号
- javascript - 为什么我使用简单的哈希函数得到非法参数错误?
- java - Java Has-A 关系、组合或聚合
- android - Expo React Native 应用程序中的 RTMP 直播
- sqlite - 插入或更新计数器值,然后在单个语句中返回计数器值