Vue+SpringBoot实现wangEditor上传图片实例

• 1.前端Vue
• 2.后端
• • 2.1接口
  • 2.2封装结果类
  • 2.3配置文件类，配置跨域，和文件映射
• 3.测试

1.前端Vue

安装步骤跳过，直接上代码。
注意必须在mounted方法体里面。

export default {
  name: "EditArticle",
  data() {
    return {
      editor: ""
    }
  },
  methods: {
    submit() {

      console.log(this.editor.txt.html());
    }
  },
  mounted() {

    this.editor = new E('#toolbar-container', '#text-container');

    this.editor.config.uploadImgServer = 'http://xxx.com:9999/article/imgUpload';//后端接口位置
    this.editor.config.uploadFileName = 'file';//参数名字
    this.editor.create();
  }
}

2.后端

2.1接口

@RestController
//@CrossOrigin(allowCredentials = "true")
@RequestMapping("/article")
public class ArticleController {

    private String serverPath="http://xxx.xxx:9999/images/";

    @PostMapping(value = "/imgUpload", headers = "content-type=multipart/form-data")
    public ImgResult imgUpload(@RequestParam("file") MultipartFile file) {

        String str = file.getOriginalFilename();
        str= SaltUtils.getSalt(8)+str;  //前面获取一个8位的随机盐，防止文件重名
        String filePath = "/opt/userFile/img/"; //文件存放位置
        String filePathName = filePath + str;  //文件存放位置加文件名
        //进行保存文件
        try {
            File savePathFile = new File(filePath);

            //如果目录不存在
            if (!savePathFile.exists()) {
                savePathFile.mkdirs();//创建文件
            }

            File saveFile = new File(filePathName);
            saveFile.createNewFile();

            file.transferTo(saveFile);

            filePathName=serverPath+str;
            String[] strings = {filePathName};//返回给前端的图片地址

            return ImgResult.succ(strings);
        } catch (IOException e) {
            e.printStackTrace();
        }

        return ImgResult.fail();
    }
}

2.2封装结果类

@Data
public class ImgResult {
    private Integer errno;
    private String [] data;

    public static ImgResult succ(String []object){
        ImgResult imgResult = new ImgResult();
        imgResult.setErrno(0);
        imgResult.setData(object);
        return imgResult;
    }
    public static ImgResult fail(){
        ImgResult imgResult =new ImgResult();
        imgResult.setErrno(-1);
        imgResult.setData(null);
        return imgResult;
    }
}

2.3配置文件类，配置跨域，和文件映射

跨域：

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    /**
     * 开启跨域
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 设置允许跨域的路由
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOriginPatterns("*")
                // 是否允许证书（cookies）
                .allowCredentials(true)
                // 设置允许的方法
                .allowedMethods("*")
                // 跨域允许时间
                .maxAge(3600);
    }

}

文件映射（实现外网可以通过一个url就访问云服务器上的文件）

@Configuration
@EnableWebMvc
public class Config extends WebMvcConfigurerAdapter {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/images/**")   //虚拟路径，即通过url访问时的路径
                .addResourceLocations("file:/opt/userFile/img/"); //配置图片存储的实际路径 ，如果是linux一定要加前面的file：字段，就像代码中的一样
    }
}

3.测试

就可以直接通过QQ截图粘贴进输入框就行了。