前后端图片上传与接收（以EditorMarkdown为例）

vue 中如何使用

1. 安装

安装mavon-editor:npm install mavon-editor --save

2. 引入、配置

在要使用markdown编辑器的组件内操作：

<script>
// 导入组件 及 组件样式
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
</script>

在要使用markdown编辑器的组件内操作:

   <div>
                    <mavon-editor
                            v-model="form.content"
                            ref="md"
                            @change="change"
                            @imgAdd="$imgAdd"
                            @imgDel="$imgDel"
                            style="min-height: 600px;z-index: 0"
                    />

                    <button @click="submit"></button>
                </div>

注册组件

 // 注册
    components: {
        mavonEditor,
    },

将图片上传到服务器，返回地址替换到md中

   // 绑定@imgAdd event
            $imgAdd(pos, $file){
                // 将图片上传到服务器.
                var formdata = new FormData();
                formdata.append('image', $file);
                request({
                    url: '/upload11/uploadFile',
                    method: 'post',
                    data: formdata,
                    headers: { 'Content-Type': 'multipart/form-data' },
                }).then((flag) => {

                    console.log(flag)
                    //在插入图片处添加图片所在的url
                    this.$refs.md.$img2Url(pos, flag.data);
                })
            },

后端接口

导入的依赖

<dependency>
	<groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.2.1</version>
</dependency>

<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.5</version>
</dependency>

接口

@RestController
@RequestMapping("/upload11")
public class BlogInfoController {

        @PostMapping("/uploadFile")
        public Result<String> uploadFile(HttpServletRequest request, HttpServletRequest response, HttpSession session) throws IOException {
            MultipartHttpServletRequest multipartRequest=(MultipartHttpServletRequest) request;
            MultipartFile multipartFile = multipartRequest.getFile("image");//file是form-data中二进制字段对应的name


            String flag = IdUtil.fastSimpleUUID();//定义文件唯一标识
            String originalFilename = multipartFile.getOriginalFilename();  //获取文件名称
            String rootFilePath = System.getProperty("user.dir") + "/src/main/resources/files/" + flag + originalFilename; //获取building-service文件夹路径+文件路径
            //将前台传过来的file对象写入到（磁盘）文件夹中
            File file = FileUtil.writeBytes(multipartFile.getBytes(), rootFilePath);


            //MultipartFile自带的解析方法
            multipartFile.transferTo(file);
            //返回图片所在url
            return   Result.success("http://127.0.0.1:8081"+"/files/" + flag);
        }


}

到这里也就结束了
效果截图