From表单ajax提交新增(含图片且图片回传)

一个新增一弄弄一天.

上传数据第一步首先导入文件上传依赖包：

<dependency>

<groupId>commons-fileupload</groupId>

<artifactId>commons-fileupload</artifactId>

<version>1.4</version>

</dependency>

<dependency>

    <groupId>commons-io</groupId>

    <artifactId>commons-io</artifactId>

     <version>2.11.0</version>

</dependency>

前端HTML代码：（我这段是新增form表单提交,内含图片上传）

<form id="cartes" enctype="multipart/form-data">
    <!—必须将表单的method设置为POST，并将enctype设置为multipart/form-data。只有在这样的情况下，浏览器才会把用户选择的文件以二进制数据发送给服务器。-->
    <div class="mo3">
        <div class="mo4">
            <input type="file" id="upPortrait" hidden name="cartePicture"><!--头像上传文本框-->
            <div class="">菜&emsp;图: &emsp;&emsp;
                <img src="" height="130px" id="userPicture" alt="头像">
            </div>
            <div>菜&emsp;名: &emsp;&emsp;<input name="dishName" type="text"></div>
            <div>菜单价: &emsp;&emsp;<input name="vegetablePrices" type="text"></div>
            <div>菜类型:&emsp;&emsp;
                <select name="carteType" lay-verify="required">
                    <option value="">请选择</option>
                    <option value="0">素菜</option>
                    <option value="1">荤菜</option>
                    <option value="2">汤</option>
                    <option value="3">甜点</option>
                </select>
            </div>
            <div style="margin: 0 auto;">
                <button type="submit" class="xiugaian" lay-submit lay-filter="CarteSubmit">确定</button>
                <button type="reset" hidden>重置</button>
            </div>
        </div>
    </div>
</form>

<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery.form/4.3.0/jquery.form.min.js" type="application/javascript"></script>

<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>