开发文档

说明：本套教程核心讲解如何上传图片和视频，并出现回显功能

1.功能展示

请见页尾

2.环境配置：

后端 SpringBoot

前端 Vue-cli Vue3 wangeditor@4.6.3

3.基础知识

4.后端开发

4.1 新建文件

新建启动文件，通过IDEA 配置SpringBoot文件
工程文件分析，添加依赖

SpringBoot 项目其实是一个Maven的父子项目，关于Spring的版本修改只需要去pom.xml里修改即可

<parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.0</version>
        <relativePath/>
</parent>

编写上传文件的接口

package com.qkm.wiki.controller;

import com.qkm.wiki.domain.UploadResult;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.UUID;

/**
 * @Masir Description:
 * IO:
 */
@RestController
@RequestMapping("/up")
public class Uploading {

    /* 时间格式化
     */
    private SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy/MM/dd/");

    @RequestMapping(path = "/upload")
    public UploadResult uploadFile(MultipartFile file, HttpServletRequest request) {
        //1.后半段目录：  
        String directory = simpleDateFormat.format(new Date());
        /**
         *  2.文件保存目录  
         *  如果目录不存在，则创建
         */
        String filePath =  "D:\\QKMSchool\\web\\public\\Git\\";  //"D:\\Git\\";
        File dir = new File(filePath + directory);
        if (!dir.exists()) {
            dir.mkdirs();
        }
        //log.info("图片上传，保存位置：" + fileSavePath + directory);
        //3.给文件重新设置一个名字
        //后缀
        String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
        String newFileName= UUID.randomUUID().toString().replaceAll("-", "")+suffix;
        //4.创建这个新文件
        File newFile = new File(filePath + directory + newFileName);
        //5.复制操作
        try {
            file.transferTo(newFile);
            //协议 :// ip地址 ：端口号 / 文件目录
            String url = request.getScheme() + "://" + request.getServerName() + ":" + 				 request.getServerPort() + "/Git/" + directory + newFileName;
            //og.info("图片上传，访问URL：" + url);
            return UploadResult.builder().data(url).message("上传成功！").code("1").build();
        } catch (IOException e) {
            return UploadResult.builder().data(null).message("IO异常！").code("-1").build();
        }
    }}

增加资源映射

package com.qkm.wiki.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @Masir Description:
 * IO:
 */
@Configuration
public class WebConfig implements WebMvcConfigurer {
    /**
     * 图片保存路径，自动从yml文件中获取数据（自行测试）
     *   我用的是文件路径形式
     */

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        /**
         * 配置资源映射
         *
         */
        registry.addResourceHandler("/Git/**")
                .addResourceLocations("file:"+"D:\\QKMSchool\\web\\public\\Git\\");
    }
}

增加一个返回给前端的类

package com.qkm.wiki.domain;

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * @Masir Description:
 * IO:
 */
@Data
@Builder
@AllArgsConstructor
@NoArgsConstructor
public class UploadResult {
    private String code;
    private String message;
    private Object data;
}

以上已完成所有配置，启动即可

5.后端测试

测试工具Postman，打开Postman，根据自己的URL进行测试

以上已测试成功！

6.前端开发

6.1 新建文件

vue creat upload3

根据自己的需求配置好环境，此项目用的是vue3

6.2 测试项目

安装vue-cli文件，并启动测试（目的是测试环境安装的效果）

cd upload3
npm run serve

增加 WangEdit 页面，注意配置路由

微信截图_20210821235509.png

WangEdit 页面程序核心代码（注意我是用TS写的，所以大家使用记得需要修改格式）

这部分配置说明可以查看wangEdit的官网

     editor.config.showLinkImg = true
     editor.config.uploadFileName="file"
     editor.config.uploadVideoName = 'file'
     editor.config.uploadImgServer = 'http://localhost:8989/login/upload1'     // 图片后端接口
     editor.config.uploadVideoServer = 'http://localhost:8989/login/upload1'   // 视频后端接口

      //自定义上传图片事件
      editor.config.uploadImgHooks = {
        success : function(xhr) {
          console.log("上传成功");
        },
        fail : function(xhr, editor, result) {
          console.log("上传失败,原因是"+result);
        },
        error : function(xhr, editor) {
          console.log("上传出错");
        },
        timeout : function(xhr, editor) {
          console.log("上传超时");
        },
        customInsert: function (insertImgFn:any, result) {
           
            // window.serverUrl 是nginx图片服务器地址
            // url 是后台返回的上传图片的路径
          console.log(result);
          console.log(result.data);
          insertImgFn(result.data)
        }
        }

      editor.config.uploadVideoHooks = {
          // 上传视频之前
          before: function(xhr) {
              console.log(xhr)
            
          },
          // 视频上传并返回了结果，视频插入已成功
          success: function(xhr) {
              console.log('success', xhr)
          },
          // 视频上传并返回了结果，但视频插入时出错了
          fail: function(xhr, editor, resData) {
              console.log('fail', resData)
          },
          
          // 视频上传并返回了结果，想要自己把视频插入到编辑器中
          // 例如服务器端返回的不是 { errno: 0, data: { url : '.....'} } 这种格式，可使用 customInsert
          customInsert: function(insertVideoFn:any, result) {
              // result 即服务端返回的接口
              console.log('customInsert', result)

              // insertVideoFn 可把视频插入到编辑器，传入视频 src ，执行函数即可
              insertVideoFn(result.data)
          }
      }
     editor.create()

启动程序，如下图：

微信截图_20210822000211.png

此时，前端的配置已完成

7.联合测试

请见GIF

总结

后续还会增加数据库的存储功能，本次文档只做一次记录，第一次写，如果大家喜欢，欢迎给出指导意见~

Vue3+SpringBoot+WangEdit 完成图片/视频 上传功能