出现错误所需的请求部分“logoURL”不存在答案

【问题标题】：Getting error Required request part 'logoURL' is not present出现错误所需的请求部分“logoURL”不存在
【发布时间】：2021-05-12 05:45:43
【问题描述】：

我正在尝试保存一个带有图像徽标的简单表单，但我在浏览器控制台中收到 HTTP 400。并且所需的请求部分“logoURL”不存在请查看我的代码并让我知道我在这里做错了什么。

Master Ajax：我为从 Ajax 发送请求和响应而制作的类

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); 
                }
            }); 
        }
    }
}

商店表格

<%@include file="/WEB-INF/views/Store/StoreTemplet/Header.jsp"%>
<%-- <script src="<c:url value="/resources/js/testEstimation/TestEstimationPhases.js"/>"></script> --%>
 <script type="text/javascript" charset="utf8" src="<c:url value="/js/storejs/storejs.js"/>"></script>
<!-- Content wrapper start -->
<div class="content-wrapper">
    <div class="card">
        <h2 class="card-title">New Store</h2>
        <form name="storeForms"  method="POST" enctype="multipart/form-data">
            <!-- Hidden For Update employee  -->
            <input type="hidden" />
            <!-- First row -->
            <div class="form-row row-eq-spacing-sm">
                <div class="col-sm">
                    <label for="first-name" class="required">Store Name</label>
                    <input type="text"  class="form-control"
                        id="storeName" placeholder="Store Name" required="required" />
                </div>
                <div class="col-sm">
                    <label for="last-name" class="required">Country</label>
                    <input type="text" id="country"  class="form-control" />
                </div>
            </div>
            <!-- Second row container -->
            <div class="form-row row-eq-spacing-sm">
                <div class="col-sm">
                    <label for="first-name" class="required">City</label>
                    <input type="text" id="city" class="form-control" />
                </div>
                <div class="col-sm">
                    <label for="last-name" class="required">Street</label>
                    <input type="text" id="street" class="form-control" />
                </div>
            </div>
            <!-- Third row container -->
            <div class="form-row row-eq-spacing-sm">
                <div class="col-sm">
                    <label for="first-name" class="required">Address</label>
                    <input type="text" id="address" class="form-control" />
                </div>
                <div class="col-sm">
                    <label for="last-name" class="required">Zip Code</label>
                    <input type="text" id="zipCode" class="form-control" />
                </div>
            </div>
            <div class="form-row row-eq-spacing-sm">
                <div class="col-sm">
                    <label for="first-name" class="required">Store Description</label>
                    <input type="text" id="storeDescription"
                        class="form-control" />
                </div>
                <div class="col-sm">
                    <label for="last-name" class="required">Store Timings</label>
                    <input type="text" id="storeOpenTime" class="form-control" />
                </div>
            </div>
<div class="custom-file">
  <input type="file" id="file-input-2"  data-default-value="Store Logo" />
  <label for="file-input-2">Store logo</label>
</div>
            <!-- Submit button container -->
            <div class="text-right">
                <!-- text-right = text-align: right -->
                <input class="btn btn-primary" type="button" onclick="saveStore()" value="Add Store">
            </div>
        </form>
    </div>
</div>
<!-- Content wrapper end -->

<%@include file="/WEB-INF/views/Store/StoreTemplet/Footer.jsp"%>

Ajax 请求方法

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");
        }
    }

IDE 控制台

 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

【问题讨论】：

你的saveStore函数里面有什么？
@NisanthReddy 保存存储功能只是将所有数据保存在数据库中我在控制器下方添加了保存存储方法
我已经发布了答案，有帮助吗？
@NisanthReddy 否仍然出现相同的错误

标签： javascript ajax spring-boot jsp multipartform-data

【解决方案1】：

您似乎缺少需要添加到表单字段的name 参数

所以你输入的字段应该是

<input type="text" id="address" name="address" class="form-control" />

将相同的内容添加到您的 file 字段中。

还有你的saveStore 函数在做什么？

【讨论】：

【解决方案2】：

这里的代码存在多个问题，首先我从控制器中删除了@RequestParam("logoURL") MultipartFile file 参数，因为我在 DTO 中发送文件，所以这里不需要。（如果您发送数据使用弹簧形式，没有 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]);

【讨论】：