老师，我的图片上传出现问题

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书管理功能</title>
    <style>
        #dlgBook{
            padding: 10px
        }
    </style>
    <link rel="stylesheet" href="/resources/layui/css/layui.css">
 
    <script src="/resources/wangEditor.min.js"></script>
 
 
    <script type="text/html" id="toolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" id="btnAdd" onclick="showCreate()">添加</button>
        </div>
    </script>
 
</head>
<body>
 
 
<div class="layui-container">
    <blockquote class="layui-elem-quote">图书列表</blockquote>
   <!-- 数据表格 -->
    <table id="grdBook" lay-filter="grdBook"></table>
</div>
<!--表单内容-->
<div id="dialog" style="padding: 10px;display: none">
    <form class="layui-form" >
        <div class="layui-form-item">
         <!-- 图书类别 -->
            <select id="categoryId" name="categoryId" lay-verify="required" lay-filter=
         "categoryId">
                <option value=""></option>
                <option value="1">前端</option>
            <option value="2">后端</option>
            <option value="3">测试</option>
            <option value="4">产品</option>
            </select>
 
        </div>
        <div class="layui-form-item">
         <!-- 书名 -->
            <input type="text" id="bookName" name="bookName" required lay-verify="required" placeholder="请输入书名"
                   autocomplete="off" class="layui-input">
        </div>
 
 
        <div class="layui-form-item">
         <!-- 子标题 -->
            <input type="text" id="subTitle" name="subTitle" required lay-verify="required" placeholder="请输入子标题"
                   autocomplete="off" class="layui-input">
        </div>
 
        <div class="layui-form-item">
         <!-- 作者 -->
            <input type="text" id="author" name="author" required lay-verify="required" placeholder="请输入作者信息"
                   autocomplete="off" class="layui-input">
        </div>
 
        <div style="margin-top: 30px;font-size: 130%">图书介绍(默认第一图将作为图书封面)</div>
        <div class="layui-form-item" >
         <!-- wangEditor编辑器 -->
            <div id="editor" style="width: 100%">
 
            </div>
        </div>
      <!-- 图书编号 -->
        <input id="bookId" type="hidden">
      <!-- 当前表单操作类型,create代表新增 update代表修改 -->
        <input id="optype"  type="hidden">
        <div class="layui-form-item" style="text-align: center">
         <!-- 提交按钮 -->
            <button class="layui-btn" lay-submit="" lay-filter="btnSubmit">立即提交</button>
        </div>
    </form>
</div>
<script src="/resources/layui/layui.all.js"></script>
<script>
 
    var table = layui.table; //table数据表格对象
    var $ = layui.$; //jQuery
    var editor = null; //wangEditor富文本编辑器对象
    //初始化图书列表
    table.render({
        elem: '#grdBook'  //指定div
        , id : "bookList" //数据表格id
        , toolbar: "#toolbar" //指定工具栏,包含新增添加
        , url: "/management/book/list" //数据接口
        , page: true //开启分页
        , cols: [[ //表头
            {field: 'bookName', title: '书名', width: '300'}
            , {field: 'subTitle', title: '子标题', width: '200'}
            , {field: 'author', title: '作者', width: '200'}
            , {type: 'space', title: '操作', width: '200' , templet : function(d){
               //为每一行表格数据生成"修改"与"删除"按钮,并附加data-id属性代表图书编号
                    return "<button class='layui-btn layui-btn-sm btn-update'  data-id='" + d.bookId + "' data-type='update' onclick='showUpdate(this)'>修改</button>" +
                        "<button class='layui-btn layui-btn-sm btn-delete'  data-id='" + d.bookId + "'   onclick='showDelete(this)'>删除</button>";
                }
            }
        ]]
    });
   //显示更新图书对话框
   //obj对应点击的"修改"按钮对象
    function showUpdate(obj){
      //弹出"编辑图书"对话框
        layui.layer.open({
            id: "dlgBook", //指定div
            title: "编辑图书", //标题
            type: 1, 
            content: $('#dialog').html(), //设置对话框内容,复制自dialog DIV
            area: ['820px', '730px'], //设置对话框宽度高度
            resize: false //是否允许调整尺寸
        })
 
        var bookId = $(obj).data("id"); //获取"修改"按钮附带的图书编号
        $("#dlgBook #bookId").val(bookId); //为表单隐藏域赋值,提交表单时用到
 
        editor = new wangEditor('#dlgBook #editor'); //初始化富文本编辑器
        editor.customConfig.uploadImgServer = '/management/book/upload' //设置图片上传路径
        editor.customConfig.uploadFileName = 'img'; //图片上传时的参数名
        editor.create(); //创建wangEditor
        $("#dlgBook #optype").val("update"); //设置当前表单提交时提交至"update"更新地址
 
      //发送ajax请求,获取对应图书信息
        $.get("/management/book/id/" + bookId , {} , function(json){
         //文本框回填已有数据
            $("#dlgBook #bookName").val(json.data.bookName);//书名
            $("#dlgBook #subTitle").val(json.data.subTitle); //子标题
            $("#dlgBook #author").val(json.data.author);//作者
            $("#dlgBook #categoryId").val(json.data.categoryId); //分类选项
            editor.txt.html(json.data.description); //设置图文内容
            layui.form.render();//重新渲染LayUI表单
        } , "json")
 
 
 
    }
   //显示新增图书对话框
    function showCreate(){
      //弹出"新增图书"对话框
        layui.layer.open({
            id: "dlgBook",
            title: "新增图书",
            type: 1,
            content: $('#dialog').html(),
            area: ['820px', '730px'],
            resize: false
        })
      //初始化wangEditor
        editor = new wangEditor('#dlgBook #editor');
        editor.customConfig.uploadImgServer = '/management/book/upload';//设置图片上传地址
        editor.customConfig.uploadFileName = 'img';//设置图片上传参数
        editor.create();//创建wangEditor
 
        layui.form.render(); //LayUI表单重新
        $("#dlgBook #optype").val("create");//设置当前表单提交时提交至"create"新增地址
 
    };
 
   //对话框表单提交
    layui.form.on('submit(btnSubmit)', function(data){
      //获取表单数据
        var formData = data.field;
       
      //判断是否包含至少一副图片,默认第一图作为封面显示
        var description = editor.txt.html();
        if(description.indexOf("img") == -1){
            layui.layer.msg('请放置一副图片作为封面');
            return false;
        }
      //获取当前表单要提交的地址
      //如果是新增数据则提交至create
      //如果是更新数据则提交至update
        var optype = $("#dlgBook #optype").val();
       
        if(optype == "update"){
         //更新数据时,提交时需要附加图书编号
            formData.bookId=$("#dlgBook #bookId").val();
        }
      //附加图书详细描述的图文html
        formData.description = description;
      //向服务器发送请求
        $.post("/management/book/" + optype , formData , function(json){
            if(json.code=="0"){
            //处理成功,关闭对话框,刷新列表,提示操作成功
                layui.layer.closeAll();
                table.reload('bookList');
                layui.layer.msg('数据操作成功,图书列表已刷新');
            }else{
            //处理失败,提示错误信息
                layui.layer.msg(json.msg);
            }
        } ,"json")
        return false;
    });
   //删除图书
    function showDelete(obj){
      //获取当前点击的删除按钮中包含的图书编号
        var bookId = $(obj).data("id");
      //利用layui的询问对话框进行确认
        layui.layer.confirm('确定要执行删除操作吗?', {icon: 3, title:'提示'}, function(index){
                
            //确认按钮后发送ajax请求,包含图书编号
            $.get("/management/book/delete/" + bookId, {}, function (json) {
               if(json.code=="0"){
                  //删除成功刷新表格
                  table.reload('bookList');
                  //提示操作成功
                  layui.layer.msg('数据操作成功,图书列表已刷新');
                  //关闭对话框
                  layui.layer.close(index);
               }else{
                  //处理失败,提示错误信息
                  layui.layer.msg(json.msg);
               }
            }, "json");
          
        });
 
    }
 
</script>
</body>
</html>

package com.imooc.reader.controller.management;
 
import org.springframework.stereotype.Controller;
import org.springframework.stereotype.Repository;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;
 
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.net.MalformedURLException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
 
@Controller
@RequestMapping("/management/book")
public class MBookController {
    @GetMapping("/index.html")
    public ModelAndView showBook(){
        return new ModelAndView("/management/book");
    }
 
    /**
     * wangEditor文件上传
     * @param file 上传文件
     * @param request 原生请求对象
     * @return
     * @throws IOException
     */
    @PostMapping("/upload")
    @ResponseBody
    public Map upload(@RequestParam("img") MultipartFile file , HttpServletRequest request) throws IOException {
        //得到上传目录
        String uploadPath = request.getServletContext().getResource("/").getPath() + "/upload/";
        //文件名
        String fileName = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());
        //扩展名
        String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
        //保存文件到upload目录
        file.transferTo(new File(uploadPath + fileName + suffix));
        Map result = new HashMap();
        result.put("errno", 0);
        result.put("data", new String[]{"/upload/" + fileName + suffix});
        return result;
    }
}

10:07:45 DEBUG {http-nio-80-exec-3} o.s.w.s.DispatcherServlet - GET "/management/book/index.html", parameters={}
10:07:45 DEBUG {http-nio-80-exec-3} o.s.w.s.m.m.a.RequestMappingHandlerMapping - Mapped to com.imooc.reader.controller.management.MBookController#showBook()
10:07:45 DEBUG {http-nio-80-exec-3} o.s.w.s.v.f.FreeMarkerView - View name '/management/book', model {}
10:07:45 DEBUG {http-nio-80-exec-3} o.s.w.s.v.f.FreeMarkerView - Rendering [/management/book.ftl]
10:07:45 DEBUG {http-nio-80-exec-3} o.s.w.s.DispatcherServlet - Completed 200 OK
10:07:45 DEBUG {http-nio-80-exec-4} o.s.w.s.DispatcherServlet - GET "/management/book/list?page=1&limit=10", parameters={masked}
10:07:45 DEBUG {http-nio-80-exec-4} o.s.w.s.h.SimpleUrlHandlerMapping - Mapped to org.springframework.web.servlet.resource.DefaultServletHttpRequestHandler@7ffe0bf6
10:07:45 DEBUG {http-nio-80-exec-4} o.s.w.s.DispatcherServlet - Completed 404 NOT_FOUND
10:07:54 DEBUG {http-nio-80-exec-5} o.s.w.s.DispatcherServlet - POST "/management/book/upload", parameters={}
10:07:55 DEBUG {http-nio-80-exec-5} o.s.w.m.c.CommonsMultipartResolver - Part 'img', size 288692 bytes, filename='1.jpg'
10:07:55 DEBUG {http-nio-80-exec-5} o.s.w.s.m.m.a.RequestMappingHandlerMapping - Mapped to com.imooc.reader.controller.management.MBookController#upload(MultipartFile, HttpServletRequest)
10:07:55 DEBUG {http-nio-80-exec-5} o.s.w.m.c.CommonsMultipartFile - Part 'img', filename '1.jpg': moved to [C:\licheng\intellij%20IDEA\imooc-reader\out\artifacts\imooc_reader_Web_exploded\upload\20200821100755047.jpg]
10:07:55 DEBUG {http-nio-80-exec-5} o.s.w.s.m.m.a.RequestResponseBodyMethodProcessor - Using 'application/json', given [*/*] and supported [application/json, application/*+json]
10:07:55 DEBUG {http-nio-80-exec-5} o.s.w.s.m.m.a.RequestResponseBodyMethodProcessor - Writing [{errno=0, data=[Ljava.lang.String;@6deb1ad4}]
10:07:55 DEBUG {http-nio-80-exec-5} o.s.w.m.c.CommonsMultipartResolver - Cleaning up part 'img', filename '1.jpg'
10:07:55 DEBUG {http-nio-80-exec-5} o.s.w.s.DispatcherServlet - Completed 200 OK
10:07:55 DEBUG {http-nio-80-exec-6} o.s.w.s.DispatcherServlet - GET "/upload/20200821100755047.jpg", parameters={}
10:07:55 DEBUG {http-nio-80-exec-6} o.s.w.s.h.SimpleUrlHandlerMapping - Mapped to org.springframework.web.servlet.resource.DefaultServletHttpRequestHandler@7ffe0bf6
10:07:55 DEBUG {http-nio-80-exec-6} o.s.w.s.DispatcherServlet - Completed 404 NOT_FOUND
10:08:01 DEBUG {http-nio-80-exec-8} o.s.w.s.DispatcherServlet - GET "/resources/wangEditor.min.js.map", parameters={}
10:08:01 DEBUG {http-nio-80-exec-8} o.s.w.s.h.SimpleUrlHandlerMapping - Mapped to org.springframework.web.servlet.resource.DefaultServletHttpRequestHandler@7ffe0bf6
10:08:01 DEBUG {http-nio-80-exec-8} o.s.w.s.DispatcherServlet - Completed 404 NOT_FOUND