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

你的名字 2022-10-29 12:25 278阅读 0赞

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

*  1.前端Vue
 *  2.后端
 *   *  2.1接口
     *  2.2封装结果类
     *  2.3配置文件类，配置跨域，和文件映射
 *  3.测试
 *  4.ps(显示wangEditor保存的html片段)

# 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截图粘贴进输入框就行了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70]

# 4.ps(显示wangEditor保存的html片段) #

如果要显示该保存的html片段可以通过v-html指令实现：

如果要回显wangEditor保存的html片段(指可以进行修改)：

this.editor = new E('#wangEditor');//div的ID
        this.editor.create();
        this.editor.txt.text(`${ 这里填写wangEditor保存的html片段}`);

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70]: /images/20221024/b5da75a769e247dfa75b6e70016756bf.png