2021-04-03

Vue-TinyMCE图片上传踩坑·记

参考TinyMCE中文文档

1、设置图片粘贴上传

初始化的TinyMCE只有路径上传，没有复制粘贴（红框位置）


找到如上图位置，添加images_upload_url 或者 images_upload_handler
前者是使用tinymce默认的上传方法，输入的内容为你对应的后台的响应程序的路径，比如我用Java写的Controller，就填入相对应的Mapping（要完整）
后者是自定义上传方法，具体的可以在上面的文档里面查看，文档用的是xmlHTTP，这里我改成了我用得比较多的axios请求，具体如下

images_upload_handler: function (blobInfo, success, failure) {
          var formData = new FormData();
          // var imgbaseurl = "http://localhost:8001/";
          formData.append("file", blobInfo.blob());
          // 输出formData信息，可以注释掉
          // console.log(formData.get("file"));
          // console.log(blobInfo);
          // 你的后台处理程序路径的前缀
          var ex = "http://localhost:8001/";
          axios
            .post("http://localhost:8001/upload", formData)
            .then((response) => {
              // console.log(response.data);
              success(ex + response.data.location);
            })
            .catch(() => {
              failure("上传失败");
            });
        }

简单的后台返回，不一定要叫location，可以随意改，只要axios处理返回值时要对应上

2、可能出现的错误

①浏览器出现Cros错误：MissingAllowOriginHeader
这应该是后台配置的错误，比如我用Cros配置跨域时，设置了allowCredentials为true时，allowedPatterns就不能为*

@Configuration
public class CrosConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedPatterns("*").allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true).maxAge(3600).allowedHeaders("*");
    }
}

把allowedPatterns改成allowedOriginPatterns后错误解除

@Configuration
public class CrosConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOriginPatterns("*").allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true).maxAge(3600).allowedHeaders("*");
    }
}

②忘记加路径前缀（如下）

          axios
            .post("http://localhost:8001/upload", formData)
            .then((response) => {
              // console.log(response.data);
              success(response.data.location);
            })
            .catch(() => {
              failure("上传失败");
            });

除非你后台返回的location包含了前缀，否则就要像我上面写的那样，先用一个变量保存前缀，再把前缀和返回值拼接在一起。

以上就是踩坑的日常，希望对大家有所帮助。