MdEditor-v3中上传照片的前后端对接（图片上传至又拍云云储存）

MdEditor-v3中上传照片的前后端对接（图片上传至又拍云云储存）

使用springboot+MdEditor-v3+又拍云实现markdown的图片上传功能
需要有一定的springboot和vue基础，同时会配置又拍云，

一. 又拍云的云存储服务配置

上一篇文章，讲解又拍云和springboot整合的，可以先看这篇文章，这篇文章讲解了已经

二. Vue方面的配置

1. 安装和引入mdEditor-v3

yarn add md-editor-v3

之后在项目中引入它和css

import MdEditor from 'md-editor-v3'
import 'md-editor-v3/lib/style.css';

然后注册一下组件，就可以在template中使用标签了

2. 核心代码：onUploadImg方法

前端在回调函数中要接收后端传来的上传完成的url

<template>
	<MdEditor v-model="content"
              class="editor"
              @on-upload-img="onUploadImg"
    ></MdEditor>
</template>

<script>
import {ref} from 'vue'
export default {
    components:{ MdEditor},
    setup() {
		let content=ref("")

		// 图片上传事件
		const onUploadImg = async (files, callback) => {
        console.log("in")
        const res = await Promise.all(
            files.map((file) => {
              return new Promise((rev, rej) => {
              // 传给后端一个FormData数据，添加键值对，这里我添加了这个文章的ID和file
                const form = new FormData();
                form.append('file', file);
                form.append("articleId",5)
                axios
                // 这里是我的后端接口，请求地址和路径可以自己改
                    .post('http://localhost:8082/work/uploadImg', form, {
                      headers: {
                        'Content-Type': 'multipart/form-data'
                      }
                    })
                    .then((res) => {
                      console.log(res)
                      rev(res)
                    })
                    .catch((error) => rej(error));
              });
            })
        );

        callback(res.map((item) => item.data.url));
      };
      return {
      	content,
      	onUploadImg
      }
	}
</script>

三. springboot后端部分

// 这个路径就是前端发post请求的路径
   @PostMapping("/work/uploadImg")
    public R uploadImg(MultipartFile file,Integer articleId) throws UpException, IOException {
    	// 拼接文件名
        String trueFileName =file.getOriginalFilename();
        String suffix = trueFileName .substring(trueFileName .lastIndexOf("."));
        String fileName = trueFileName+ UUID.randomUUID()+suffix;
        
        // 上传到又拍云
        UpYun upYun=new UpYun("red-ghost-storage","redghost","xxxxxxxxxxxx密码");
        String dirPath="/work/mdPics/"+articleId.toString()+"/";
        System.out.println(dirPath);
		
		//  为每个文章创建了一个文件夹
        boolean mkDir = upYun.mkDir(dirPath);
        if(mkDir){
            System.out.println(dirPath+fileName);
            upYun.writeFile(dirPath+fileName,file.getBytes(),false);
            String url="http://red-ghost-storage.test.upcdn.net"+dirPath+fileName;
            // 注意最后一定要返回上传完的url，前端的回调函数中需要使用
            Map<String,Object> map=new HashMap<>();
            map.put("url",url);
            return R.ok(map);
        }else {
            return R.error("图片上传失败");
        }

    }

四. 注意点

前端在回调函数中要接收后端传来的上传完成的url

• 后端里的R类是封装好的用来返回数据的类，详细如下（看峰哥1234中cp的他的代码，很好用）

package com.szk.utils;

import java.util.HashMap;
import java.util.Map;

public class R extends HashMap {
    //构造时就给他一个初值
    public R(){put("code",0);}


    public static R ok(Map<String,Object> map){//用来返回有键值对的东西，如“message”：[{name:"szk"},{password:123}]
        R r=new R();
        r.putAll(map);//{code=0, message=[Product(id=4, name=Xiaomi 11.....
        //putAll作用是把别的map作为键值对放进原map里
        System.out.println(r);
        return r;
    }

    public static R ok(String msg){//用来返回纯消息
        R r=new R();
        r.put("msg",msg);
//       返回值样子{msg=hello, code=0}
        return r;
    }

    public static R ok(){
        return  new R();
    }
    public static R error(int code,String msg){//手动给error信息赋一个错误代码，会把默认的0覆盖掉
        R r=new R();
        r.put("code",code);
        r.put("msg",msg);
        return r;
    }

    public static R error(String msg){
        return error(500,msg);
    }

    public static R error(){
        return error(500,"未知异常");
    }
    public R put(String key,Object value){
        super.put(key,value);
        return this;
    }
}
![在这里插入图片描述](https://img-blog.csdnimg.cn/6f38a0bf1dbd414abf6d8ed73dc0b334.png)

---