使用wangEditor上传本地图片，无法显示，提示上传失败

问题描述：

1、配置了pom.xml和applicationContext.xml；

2、实现控制器方法：MBookController方法,

3、前端book.html关于上传的设置没有动。

操作：

点击上传按钮，选择本地图片，点击打开按钮，出现以下提示。

相关截图：

相关代码：

1、pom.xml
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.4</version>
</dependency>

2、applicationContext.xml；
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="defaultEncoding" value="UTF-8"/>
</bean>

3、MBookController
@PostMapping("/upload")
public Map upload(@RequestParam("img") MultipartFile file , HttpServletRequest request) throws IOException {
    //得到上传文件目录
    String uploadPath = request.getServletContext().getResource("/").getPath() + "/upload/";
    SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSSS");
    String fileName = sdf.format(new Date());
    //abc.jpg
    String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
    file.transferTo(new File(uploadPath + fileName + suffix));
    Map result = new LinkedHashMap();
    result.put("errno", 0);
    result.put("data", new String[]{"/upload/" + fileName + suffix});
    return result;
}

4、book.HTML
//实例化wangEditor富文本编辑器
    editor = new wangEditor(this.$refs.editor);
    //设置上传图片的地址
    editor.customConfig.uploadImgServer = '/api/management/book/upload';//设置图片上传地址
    //默认上传时使用的参数名
    editor.customConfig.uploadFileName = 'img';//设置图片上传参数
    editor.create();//创建wangEditor
    //设置初始内容
    editor.txt.html(this.form.description);
}

qq_飘飘无影_0 2022-02-21

源自：SSM开发社交网站 4-2 开发wangEditor文件上传功能

收起

1回答

好帮手慕阿园 2022-02-22 10:21:21

同学你好，测试代码是可以正常上传图片的，如下

同学的报错是404,404是路径有误，建议同学检查一下out或者target文件夹下的upload目录中，查看一下图片是否存在，图片名称是否正确等

另外可以检查下idea后台是否有报错，如果有，建议将报错信息反馈

祝学习愉快~

收起回答

提问者 qq_飘飘无影_0 #1

1、out文件夹下的upload目录中没有图片。虽然新增的图片提示错误，但可以正常新增图书，知识图片是裂掉的小图。
2、运行的idea后台没有报错，反馈内容为：
16:00:25 DEBUG [http-nio-8080-exec-3] o.s.w.s.DispatcherServlet - POST "/api/management/book/upload", parameters={}
16:00:26 DEBUG [http-nio-8080-exec-3] o.s.w.m.c.CommonsMultipartResolver - Part 'img', size 3138837 bytes, filename='DSC_0891.jpg'
16:00:26 DEBUG [http-nio-8080-exec-3] o.s.w.s.m.m.a.RequestMappingHandlerMapping - Mapped to com.imooc.reader.controller.management.MBookController#upload(MultipartFile, HttpServletRequest)
16:00:26 DEBUG [http-nio-8080-exec-3] o.s.w.m.c.CommonsMultipartFile - Part 'img', filename 'DSC_0891.jpg': moved to [D:\Program%20Files\Java\Maven\imooc-reader\out\artifacts\imooc_reader_Web_exploded\upload\20220222160026171.jpg]
16:00:26 DEBUG [http-nio-8080-exec-3] o.s.w.s.m.m.a.RequestResponseBodyMethodProcessor - Using 'application/json', given [*/*] and supported [application/json, application/*+json, application/json, application/*+json]
16:00:26 DEBUG [http-nio-8080-exec-3] o.s.w.s.m.m.a.RequestResponseBodyMethodProcessor - Writing [{errno=0, data=[Ljava.lang.String;@24bba429}]
16:00:26 DEBUG [http-nio-8080-exec-3] o.s.w.m.c.CommonsMultipartResolver - Cleaning up part 'img', filename 'DSC_0891.jpg'
16:00:26 DEBUG [http-nio-8080-exec-3] o.s.w.s.DispatcherServlet - Completed 200 OK
16:00:26 DEBUG [http-nio-8080-exec-2] o.s.w.s.DispatcherServlet - GET "/upload/20220222160026171.jpg", parameters={}
16:00:26 DEBUG [http-nio-8080-exec-2] o.s.w.s.h.SimpleUrlHandlerMapping - Mapped to org.springframework.web.servlet.resource.DefaultServletHttpRequestHandler@3d73d8d3
16:00:26 DEBUG [http-nio-8080-exec-2] o.s.w.s.DispatcherServlet - Completed 404 NOT_FOUND

2022-02-22 16:08:12
好帮手慕阿园回复提问者 qq_飘飘无影_0 #2

同学你好，在如下路径中多了%20，这应该是有空格造成，如：
这里建议同学将项目换到没有空格以及中文的路径再试试
或者同学可以在upload方法中，使用URLDecoder.decode(uploadPath,"UTF-8")对路径使用UTF-8编码再试试，如：
祝学习愉快~

2022-02-22 18:20:25
提问者 qq_飘飘无影_0 回复好帮手慕阿园 #3

谢谢老师，使用URLDecoder.decode(uploadPath,"UTF-8")，问题解决了。

2022-02-23 10:22:41