插入图片失败

插入图片失败

问题描述:

插入图片失败,找不出原因,看报错部分图片名字是日期格式,应该访问到了后端,还报404,无法加载wangEditor.min.js.map。wangEditor有点不明白,设置了上传地址,上传图片参数,是editor.create();上传的吗?后端返回的result怎么接收呢,保存到哪里呢?好像没看到相关代码。

相关截图:

图片描述

相关截图:

图片描述

相关代码:

        showDialog(model, data) {
                this.dialogModel = model;
                if (model == "create") {
                    this.dialogTitle = "新增图书";
                    this.form.categoryId = "1";
                    this.form.bookName = "";
                    this.form.subTitle = "";
                    this.form.author = "";
                    this.form.description = "";
                    this.dialogFormVisible = true;
                } else if (model == "update") {
                    if (data != null) {
                        this.dialogTitle = "更新图书";
                        this.form = data;
                        this.form.categoryId = this.form.categoryId.toString();
                        this.dialogFormVisible = true;
                    }
                }
                //实例化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);
            }

相关代码:

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

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕小蓝 2024-08-26 11:01:35

同学你好,老师这里配合课程源码对同学提供的代码片段进行测试,是可以正常上传图片的。建议同学将浏览器控制台切换到网络界面,看一下404的具体原因。另外,建议同学使用课程中提供的图片试一下,猜测可能是图片尺寸等问题。

同学提问的editor.create();是初始化wangEditor,也就是创建wangEditor,使得这个组件正式生效。而后端返回数据部分都是wangEditor内部封装的,确实是看不到代码的。

祝学习愉快~

  • 提问者 慕桂英5534918 #1

    用了课程提供的图片,还是不行

    2024-08-26 13:01:04
  • 好帮手慕小蓝 回复 提问者 慕桂英5534918 #2

    同学你好~

    1.如上面回答,建议同学从network界面看一下具体是哪里出现的404;

    2.建议同学使用课程源码试一下是否是浏览器或者本地环境问题;

    祝学习愉快~

    2024-08-26 13:54:02
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
Java工程师 2024版
  • 参与学习       2052    人
  • 提交作业       1506    份
  • 解答问题       1324    个

2024重磅革新,超百小时内容豪华升级,加速提升高级技能与高薪就业竞争力 课程紧贴企业最新人才需求,历经7年持续迭代,帮助万名学子入行转行 从零起点到高阶实战,学习路径稳健顺滑,成就从小白到工程师高薪

了解课程
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师