Javascript 获取所需错误请求部分';logoURL';不在场
我试图保存一个带有图像徽标的简单表单,但我在浏览器控制台中获得了HTTP400。所需的请求部分“logoURL”不存在请查看我的代码,并告诉我我在这里做错了什么 掌握Ajax:我制作的用于从Ajax发送请求和响应的类Javascript 获取所需错误请求部分';logoURL';不在场,javascript,ajax,spring-boot,jsp,multipartform-data,Javascript,Ajax,Spring Boot,Jsp,Multipartform Data,我试图保存一个带有图像徽标的简单表单,但我在浏览器控制台中获得了HTTP400。所需的请求部分“logoURL”不存在请查看我的代码,并告诉我我在这里做错了什么 掌握Ajax:我制作的用于从Ajax发送请求和响应的类 class MasterAjax{ constructor(){ this.requestType = null; this.url = null; this.timeout = 100000; this.en
class MasterAjax{
constructor(){
this.requestType = null;
this.url = null;
this.timeout = 100000;
this.enctype = null;
this.data = null;
this.processData = null;
this.contentType = null;
this.responseData = null;
this.responseStatus = null;
this.responseStatusCode = null;
}
requestData(callBack){
var parameterError=false;
if(null == this.requestType){
parameterError=true;
console.log("Error: Request Type can't be null");
}
if(null === this.url || undefined === this.url || "undefined" === this.url){
parameterError=true;
console.log("Error: URL can't be null");
}
if(null == this.data || this.data.length <= 0){
//console.log("Warning: Data is null");
}
if(parameterError === false){
/*toggleSpinnerOn(); */
$.ajax({
type : this.requestType,
enctype : this.enctype,
processData : this.processData,
contentType : this.contentType,
// url : global_contextPath+"/"+this.url,
url : global_contextPath+"/"+this.url,
data: this.data,
timeout : this.timeout,
success : function(responseData,textStatus) {
callBack(responseData,textStatus);
},
error : function(responseData,textStatus) {
callBack(responseData,textStatus);
}
});
}
}
}
控制器方法
function saveStore(){
let formData = new FormData();
//formData.append("key" , Value ) ;
formData.append("storeName", $("#storeName").val());
formData.append("country", $("#country").val());
formData.append("city", $("#city").val());
formData.append("street", $("#street").val());
formData.append("address", $("#address").val());
formData.append("zipCode", $("#zipCode").val());
formData.append("storeDescription", $("#storeDescription").val());
formData.append("storeOpenTime", $("#storeOpenTime").val());
formData.append('logoFile', $("#logoURL").val());
var obj = new MasterAjax();
obj.requestType = "POST";
obj.url = "store/saveStore";
obj.data = formData;
obj.enctype ="multipart/form-data";
obj.contentType = false;
obj.processData = false;
obj.dataType= "json";
console.log("---------------------------")
for (var pair of formData.entries()) {
console.log(pair[0]+ ': ' + pair[1]);
}
console.log("---------------------------")
obj.requestData(function(responseData){
console.log(responseData);
if(responseData.status == "OK" || responseData.status == "ok"){
alert("success");
console.log(responseData)
}else{
alert(" failed");
console.log(responseData)
}
});
}
@Controller
@RequestMapping("/store")
public class StoreController {
@ResponseBody
@RequestMapping(value = "/saveStore" , method = {RequestMethod.POST},consumes = {"multipart/form-data"})
public APIResponseModal saveStore(@ModelAttribute("storeForm") StoresDTO store,
BindingResult bres,
@RequestParam("logoURL") MultipartFile file) {
logger.info("Store Save MEthod callled !!!!!!!!");
Stores storeModal = new Stores();
String logopath = "";
APIResponseModal apiResponse = new Utils().getDefaultApiResponse();
List<String> errorList = new ArrayList<String>();
try {
if(store !=null){
storeModal = new Stores(store);
if(!file.isEmpty()) {
if(file.getSize()>1000000) {//1000000 bytes == 1 mb
errorList.add("File size should be less than 1 MB");
// return AJax
}
logopath = Utils.storeLogoPath(file);
}
storeService.saveStore(storeModal, errorList,logopath);
if(errorList.isEmpty() && !Utils.isNotNull(errorList)) {
apiResponse.setStatus(HttpStatus.OK);
apiResponse.setData("--");
apiResponse.setMessage("Store Saved Successfully !!");
}else {
apiResponse.setMessage("Failed to save store !!");
apiResponse.setStatus(HttpStatus.BAD_REQUEST);
}
}
} catch (Exception e) {
e.printStackTrace();
apiResponse.setStatus(HttpStatus.BAD_REQUEST);
apiResponse.setData("--");
apiResponse.setMessage("Error Occured at our end !!");
}
logger.info("API RESPONSE:: ::"+ apiResponse);
return apiResponse;
}
}
@Override
@Transactional
public void saveStore(Stores store,List<String> errorList,String logoPath) {
try {
if(Utils.isNotNull(store)) {
if(Utils.isNotNull(store.getStoreName())
&Utils.isNotNull(store.getAddress())
&Utils.isNotNull(store.getCountry())
&Utils.isNotNull(store.getCity())
&Utils.isNotNull(store.getStreet())
&Utils.isNotNull(store.getStoreOpenTime())
&Utils.isNotNull(store.getZipCode())
&Utils.isNotNull(store.getStoreDescription())
) {
store.setAddedAt(new java.sql.Timestamp(System.currentTimeMillis()));
store.setStoreOwner(1);
store.setUniqueStoreCode(store.getStoreName().substring(0,2)+Utils.RandomAlphaString());
store.setStoreStatus(Constants.storeStatus.OPEN);
store.setLogoURL(logoPath);
entityManager.merge(store);
}else {
errorList.add("Please Enter required Details !");
}
}else {
errorList.add("Please Enter required Details !");
}
} catch (Exception e) {
e.printStackTrace();
logger.info("Exception Occured in Save Store Method : " + e.getMessage());
errorList.add("Error Occured at our End we are Sorry !! Please try again later");
}
}
浏览器控制台
Resolved [org.springframework.web.multipart.support.MissingServletRequestPartException: Required request part 'logoURL' is not present]
Status400
VersionHTTP/1.1
Transferred1.26 KB (1.10 KB size)
Referrer Policystrict-origin-when-cross-origin
您似乎缺少了需要添加到表单字段中的
name
参数
所以输入字段应该是
将其添加到文件
字段中
还有,您的
saveStore
函数在做什么?这里的代码中有多个问题。首先,我从控制器中删除了@RequestParam(“logoURL”)MultipartFile文件
参数,因为我正在将文件发送到我的DTO中,所以这里不需要该参数。(如果您使用spring表单发送数据,而不使用AJAX,这将很好地工作),因此控制器现在看起来像
@ResponseBody
@RequestMapping(value = "/saveStore" , method = {RequestMethod.POST})
public APIResponseModal saveStore(@ModelAttribute StoresDTO store,HttpSession session)
另一个问题是Ajax请求文件,我在第14行将数据发送到控制器,代码是
formData.append('logoFile',$(“#logoURL”).val();
这在这里不正确,我只是发送文件名而不是文件,这是我得到类型不匹配异常的原因,因为我的DTO变量的类型是Multipart,我试图将字符串发送到这里,所以我在这里替换的代码是formData.append('logoFile',$('input[type=file]')[0]。files[0])
您的保存存储功能中有什么?@nisarthreddy保存存储功能只是保存数据库中的所有数据我在控制器下方添加了保存存储方法我已经发布了答案,这有帮助吗?@nisarthreddy No仍然收到相同的错误
@ResponseBody
@RequestMapping(value = "/saveStore" , method = {RequestMethod.POST})
public APIResponseModal saveStore(@ModelAttribute StoresDTO store,HttpSession session)