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

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

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

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

ref="md"     
@imgAdd="imgAdd"

所以需要将用到Mavon-Editor编辑器的组件中添加上这个属性和事件。
在这里插入图片描述
然后在方法中定义imgAdd函数
在这里插入图片描述
代码片段:

 // 上傳圖片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:导包

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

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

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请求传递给后台,后台将图片上传到云存储中,然后再向前端返回图片存储的路径,这样就能正常显示在界面上了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/46238.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

财务数据分析用什么软件好?奥威BI自带方案

做财务数据分析&#xff0c;光有软件还不够&#xff0c;还需要有标准化的智能财务数据分析方案。奥威BI数据可视化工具就是这样一款自带智能财务数据分析方案的软件。 ”BI方案“&#xff0c;一站式做财务数据分析 奥威BI数据可视化工具和智能财务分析方案结合&#xff0c;可…

Dockerfile创建 LNMP 服务+Wordpress 网站平台

文章目录 一.环境及准备工作1.项目环境2.服务器环境3.任务需求 二.Linux 系统基础镜像三.docker构建Nginx1.建立工作目录上传安装包2.编写 Dockerfile 脚本3.准备 nginx.conf 配置文件4.生成镜像5.创建自定义网络6.启动镜像容器7.验证 nginx 四.docker构建Mysql1. 建立工作目录…

Docker mysql主从同步安装

1. 构建master实例 docker run -p 3307:3306 --name mysql-master \ -v /mydata/mysql-master/log:/var/log/mysql \ -v /mydata/mysql-master/data:/var/lib/mysql \ -v /mydata/mysql-master/conf:/etc/mysql \ -e MYSQL_ROOT_PASSWORDroot \ -d mysql:5.7 2. 构建master配置…

热烈祝贺贵州董程酿酒成功入选航天系统采购供应商库

经过航天系统采购平台的严审&#xff0c;贵州董程酿酒有限公司成功入选中国航天系统采购供应商库。航天系统采购平台是航天系统内企业采购专用平台&#xff0c;服务航天全球范围千亿采购需求&#xff0c;目前&#xff0c;已有华为、三一重工、格力电器、科大讯飞等企业、机构加…

Markdown 基本语法

风无痕 August 21,2023 总览 几乎所有 Markdown 应用程序都支持 John Gruber 原始设计文档中列出的 Markdown 基本语法。但是&#xff0c;Markdown 处理程序之间存在着细微的变化和差异&#xff0c;我们都会尽可能标记出来。 标题&#xff08;Headings&#xff09; 要创建标…

「UG/NX」Block UI 体收集器BodyCollector

✨博客主页何曾参静谧的博客📌文章专栏「UG/NX」BlockUI集合📚全部专栏「UG/NX」NX二次开发「UG/NX」BlockUI集合「VS」Visual Studio「QT」QT5程序设计「C/C+&#

认识docker+LNMP架构

目录 一、docker 1.安装&#xff0c;启动 2.docker相关命令 3.如何使用&#xff1f; 二、LNMP 1.认识LNMP 2.sql注入漏洞挖掘 3.如何绕过检测进行注入 一、docker 1.安装&#xff0c;启动 2.docker相关命令 docker search nginx 搜索镜像 docker pull docker.io/ngin…

AutoHotKey+VSCode开发扩展推荐

原来一直用的大众推荐的SciTeAHK版&#xff0c;最近发现VSCode更舒服一些&#xff0c;有几个必装的扩展推荐一下&#xff1a; AutoHotkey Plus 请注意不是AutoHotkey Plus Plus。如果在扩展商店里搜索会有两个&#xff0c;一个是Plus&#xff0c;一个是Plus Plus。我选择Pllus&…

数字化系统如何让企业增收?数字化转型如何做到“业务为先”?

很多时候企业往往觉得自己一定要用更高端、更先进的系统才算是完成了数字化转型&#xff0c;但事实是这样的数字化转型往往伴随着大量时间、精力甚至是财力的投入&#xff0c;还一点收益都见不到。对于大部分企业来说&#xff0c;数字化转型是一个持久战&#xff0c;因此&#…

HTTPS

HTTPS是什么 HTTPS 属于应用层协议&#xff0c;其原理是通过SSL/TLS协议在HTTP和TCP之间插入一层安全机制。通过SSL/TLS握手过程&#xff0c;客户端和服务器协商出一个对称密钥&#xff0c;用于后续的数据加密和解密&#xff0c;从而保证数据的机密性和完整性。 为什么会需要…

DNS域名解析服务器

一、DNS简介 1、因特网的域名结构 2、域名服务器的类型划分 二、DNS域名解析的过程 三、DNS服务器配置 两个都定义&#xff0c;ttl的优先&#xff1a; 能解析&#xff0c;不能拼通&#xff08;没有13这个主机&#xff09; 别名&#xff1a; 测试&#xff1a; 主&#xff08;192…

jmap(Memory Map for Java)Java内存映像工具

jmap&#xff08;Memory Map for Java&#xff09;Java内存映像工具 jmap&#xff08;Memory Map for Java&#xff09;命令用于生成堆转储快照&#xff08;一般称为heapdump或dump文件&#xff09; 如果不使用jmap命令&#xff0c;要想获取Java堆转储快照也还有一些比较“暴…

【内网监控】通过cpolar实现远程监控

【内网监控】通过cpolar实现远程监控 文章目录 【内网监控】通过cpolar实现远程监控前言1. 在cpolar官网预留一个空白隧道2. 完成空白数据隧道&#xff0c;生成地址3. 设置空白隧道的出口4. 空白数据隧道的出口设置5. 获取公网地址6. 打开本地电脑“远程桌面”7. 打开Windows自…

浅谈无线测温系统在煤矿高压电气设备上的应用-安科瑞黄安南

摘要&#xff1a;随着社会经济的不断发展&#xff0c;电力系统向着高电压、高容量的方向前进着&#xff0c;电力系统全新的技术与设备层出不穷&#xff0c;电力的输送能力不断提升。然而&#xff0c;高压电气设备承载的高压电力负荷也让其自身的温升问题成为了威胁电网稳定的元…

Redis 数据库 NoSQL

目录 一、NoSQL 二、为什么会出现NoSQL技术 三、NoSQL的类别 键值&#xff08;Key-Value&#xff09;存储数据库 列存储数据库 文档型数据库 图形&#xff08;Graph&#xff09;数据库 四、NoSQL适应场景 五、在分布式数据库中CAP原理 1、CAP 2、BASE 一、NoSQL NoS…

静态代码扫描工具 Sonar 配置及使用

概览 Sonar 是一个用于代码质量管理的开放平台。通过插件机制&#xff0c;Sonar 可以集成不同的测试工具&#xff0c;代码分析工具&#xff0c;以及持续集成工具。与持续集成工具&#xff08;例如 Hudson/Jenkins 等&#xff09;不同&#xff0c;Sonar 并不是简单地把不同的代…

无公网IP,公网SSH远程访问家中的树莓派教程

文章目录 前言 如何通过 SSH 连接到树莓派步骤1. 在 Raspberry Pi 上启用 SSH步骤2. 查找树莓派的 IP 地址步骤3. SSH 到你的树莓派步骤 4. 在任何地点访问家中的树莓派4.1 安装 Cpolar内网穿透4.2 cpolar进行token认证4.3 配置cpolar服务开机自启动4.4 查看映射到公网的隧道地…

【探索Linux】—— 强大的命令行工具 P.3(Linux开发工具 vim)

阅读导航 前言vim简介概念特点 vim的相关指令vim命令模式(Normal mode)相关指令插入模式(Insert mode)相关指令末行模式(last line mode)相关指令 简单vim配置&#xff08;附配置链接&#xff09;温馨提示 前言 前面我们讲了C语言的基础知识&#xff0c;也了解了一些数据结构&…

docker 基础知识

目录 1. 加载docker镜像 2. 显示所有的镜像 3. 执行镜像&#xff0c;生成容器&#xff0c; 每执行一次&#xff0c;便生成一个容器 4. 显示出container名称 5. 进入容器 6. 如何将文件传入容器内 首先要确保已经安装了docker。注意&#xff1a;服务器上若没有管理员权限&am…

K8s学习笔记1

一、课程介绍&#xff1a; 1、背景&#xff1a; 1&#xff09;从基础设备主机化向容器化转换。 2&#xff09;从人肉式运维工作模式向自动化运维模式转换。 3&#xff09;从自动化运维体系向全体系智能化运维模式转换。 2、课程目标人群: 1&#xff09;掌握Linux操作系统基…