使用Mavon-Editor编辑器上传本地图片到又拍云云存储(Vue+SpringBoot)

需求:将本地的图片上传到服务器或者云存储中,考虑之后,这里我选的是上传到又拍云云存储。

复制代码
技术背景:
前端:Vue+Ajax
后端:SpringBoot
存储:又拍云云存储

原理:Mavon-Editor编辑器有两个重要的属性和事件

复制代码
ref="md"     
@imgAdd="imgAdd"

所以需要将用到Mavon-Editor编辑器的组件中添加上这个属性和事件。

然后在方法中定义imgAdd函数

代码片段:

javascript 复制代码
 // 上傳圖片script部分
    imgAdd(pos, file) {
      //这里的pos指的是在数组中的下标
      //这里创建FormData对象并将从本地获取到的file值存入。
      var formdata = new FormData();
      formdata.append("file", file);

      getimgurl(formdata)
        .then((response) => {
          // 请求成功,获取后端返回的字符串数据
        //   const url = response;
        //   console.log("返回的字符串数据:", response);
		  this.$refs.md.$img2Url(pos, response);//直接賦值就好了
        })
        .catch((error) => {
          // 请求失败,处理错误
          console.error("请求失败0000:", error);
        });

     
    },

其中请求路径是你自己的后端

例如:http:localhost:8080/admin/xxx

后端需要做的:

1:导包

javascript 复制代码
<!--        又拍云配置-->
        <dependency>
            <groupId>com.upyun</groupId>
            <artifactId>java-sdk</artifactId>
            <version>4.2.3</version>
        </dependency>

2:编写控制层处理前端请求

java 复制代码
import com.UpYun;
import com.upyun.UpException;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
import java.util.UUID;

/**
 * 功能描述
 *
 * @author:
 * @date: 2023年08月20日 15:37
 */
@RestController
@RequestMapping("/admin")
@CrossOrigin(origins = "*", methods = {RequestMethod.GET, RequestMethod.POST, RequestMethod.PUT, RequestMethod.DELETE},
        allowedHeaders = {"Content-Type", "Authorization"})
public class ImgUpload {
    @Value("${upload.upyun.bucket-name}")
    private String bucketName;
    @Value("${upload.upyun.username}")
    private String username;
    @Value("${upload.upyun.password}")
    private String password;
    //上面的可以直接写死,不需要注入,
    @PostMapping("imgAdd")
    // 这个路径就是前端发post请求的路径
    public String uploadImg( MultipartFile file) throws UpException, IOException {
        // 拼接文件名
//        System.out.println("进来了"+file);
        String trueFileName =file.getOriginalFilename();
//        String suffix = trueFileName .substring(trueFileName .lastIndexOf("."));
        String fileName = UUID.randomUUID().toString()+trueFileName;

        // 上传到又拍云

        UpYun upYun=new UpYun(bucketName,username,password);
//        UpYun upYun=new UpYun("空间名","操作员名称","操作员密码");
        String dirPath="/img/blog-img/";

        //  为每个文章创建了一个文件夹
        boolean mkDir = upYun.mkDir(dirPath);
        if(mkDir){
//            System.out.println(dirPath+fileName);
            upYun.writeFile(dirPath+fileName,file.getBytes(),false);

            String url="https://你的域名"+dirPath+fileName;
            System.out.println("url: "+url.toString());
            return url;
        }else {
            return "后端:图片上传失败";
        }

    }

}

主要思想:就是前端将本地上传的文件通过发送Ajax请求传递给后台,后台将图片上传到云存储中,然后再向前端返回图片存储的路径,这样就能正常显示在界面上了。

相关推荐
猩兵哥哥2 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
EMT4 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
我是日安4 小时前
从零到一打造 Vue3 响应式系统 Day 9 - Effect:调度器实现与应用
前端·vue.js
鹏多多4 小时前
深入解析vue的keep-alive缓存机制
前端·javascript·vue.js
考虑考虑19 小时前
Jpa使用union all
java·spring boot·后端
用户516816614584121 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端缘梦21 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
Simon_He21 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
王同学QaQ1 天前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊1 天前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端