wangeditor上传图片报406错误

wangeditor上传图片报406错误

老师您好,我在用wangeditor上传图片的时候报406错误,在APIfox中测试接口时是没问题的。

https://img1.sycdn.imooc.com//climg/6262aef509edc84f09000715.jpg


但是用wangeditor上传的时候就会报406错误,然后后端也会有报错,但是文件是已经在服务器端保存成功了。

相关截图:

https://img1.sycdn.imooc.com//climg/6262af560968113a19050764.jpg

https://img1.sycdn.imooc.com//climg/6262b13009d7ff3a15430826.jpg


后端相关代码:

@PostMapping("upload")
    @ResponseBody
    public Map upload(@RequestParam("img") MultipartFile file, HttpServletRequest request) {
        String filename = file.getOriginalFilename();
        assert filename != null;
        String suffixName = filename.substring(filename.lastIndexOf("."));
        String newFileName = UUID.randomUUID()+ suffixName;
        File fileDirectory = new File(Constant.FILE_UPLOAD_DIR);
        File destFile = new File(Constant.FILE_UPLOAD_DIR + newFileName);
        if (!fileDirectory.exists()) {
            if (fileDirectory.mkdir()) {
                throw new BusinessiException(ExceptionEnum.MKDIR_FAIL);
            }
        }
        try {
            file.transferTo(destFile);
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
        Map result=new HashMap();
        try {
            String fileURI = getHost(new URI(request.getRequestURL() + "")) + "/images/" + newFileName;
            result.put("errno",0);
            Map dataMap=new HashMap();
            dataMap.put("url",fileURI);
//            dataMap.put("alt",newFileName);
            result.put("data",dataMap);
            return result;
        } catch (URISyntaxException e) {
            result.put("errno",1);
            result.put("message","上传失败");
            return result;
        }
    }

    private URI getHost(URI uri) {
        URI effectiveURI;
        try {
            effectiveURI = new URI(uri.getScheme(), uri.getUserInfo(), uri.getHost(), uri.getPort(), null, null, null);
        } catch (URISyntaxException e) {
            effectiveURI = null;
        }
        return effectiveURI;
    }

前端相关代码:

const editorConfig = { MENU_CONF: {},placeholder: '请输入内容...' }
editorConfig.MENU_CONF['uploadImage'] = {
  server: 'http://192.168.10.73:8880/article/upload', // 上传图片地址

  timeout: 5 * 1000, // 5s

  fieldName: 'img',
  headers: {Accept: 'text/x-json'},
  maxFileSize: 10 * 1024 * 1024, // 10M

  onBeforeUpload(files) {
    console.log('onBeforeUpload', files)
    return files // 返回哪些文件可以上传
    // return false 会阻止上传
  },
  onProgress(progress) {
    console.log('onProgress', progress)
  },
  onSuccess(file, res) {
    console.log('onSuccess', file, res)
  },
  onFailed(file, res) {
    alert(res.message)
    console.log('onFailed', file, res)
  },
  onError(file, err, res) {
    alert(err.message)
    console.error('onError', file, err, res)
  },
  }


正在回答

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

1回答

出现406一般有两种原因:

1、Jackson包不存在(springMVC默认依赖Jackson包 )。

2、使用了@ResponseBody,返回数据后缀是.json,但是映射器后缀又是.html.最后浏览器收到数据不知该以哪种类型数据来进行解析,所以就会报406状态码

顺便看看这个https://blog.csdn.net/qq_39137555/article/details/94721322


  • 欧阳乔治 提问者 #1

    最后解决了,我在wangeditor的官方示例赋值的时候把一个配置项备注后就没问题了。

    https://img1.sycdn.imooc.com//climg/6263c46a099fc91d11060198.jpg

    2022-04-23 17:18:49
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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