🎉🎉🎉🎉🎉🎉
欢迎访问的个人博客：https://swzbk.site/，加好友，赚🧧🧧🧧
🎉🎉🎉🎉🎉🎉
1、blog-cms代码修改
- 修改 NBlog-master/blog-cms/src/views/blog/blog/WriteBlog.vue文件 如下图，分别增加@imgAdd方法和ref引用
引入uploadPic方法：
import {getCategoryAndTag, saveBlog, getBlogById, updateBlog,uploadPic} from '@/api/blog'
在methods中增加如下方法：
// 文章描述：将图片上传到服务器，返回地址替换到md中
imgAddTwo(pos, $file) {
var _this = this
var formdata = new FormData();
formdata.append('image', $file);
uploadPic(formdata).then((response) => {
// 第二步.将返回的url替换到文本原位置 -> 
if (response.code === 200) {
var url = response.msg;
_this.$refs.mdedittwo.$img2Url(pos,url)
}
})
},
// 文章正文：将图片上传到服务器，返回地址替换到md中
imgAdd(pos, $file) {
var _this = this
var formdata = new FormData();
formdata.append('image', $file);
uploadPic(formdata).then((response) => {
// 第二步.将返回的url替换到文本原位置 -> 
if (response.code === 200) {
var url = response.msg;
_this.$refs.mdedit.$img2Url(pos,url)
}
})
},- 修改 NBlog-master\blog-cms\src\api\blog.js 增加uploadPic方法
//swz 上传图片
export function uploadPic(formdata) {
return axios({
url: 'upload',
method: 'POST',
Headers: {
'Content-Type': 'multipart/form-data'
},
data: formdata
})
}2、腾讯云cos购买与配置
分别购买以下三个资源，这里我分别买的都是最基础大小的：
资源包介绍，这三是我们都用用到的：
查看资源包，购买完资源包就不用管了，这些资源会自动抵扣你之后用的存储桶：
创建存储桶：参考：存储桶
创建完成，查看存储桶：
3、获取存储桶参数
存储桶基本参数：
- 访问域名
- 存储桶名称
- 所属地域
获取密钥对参数：https://console.cloud.tencent.com/cam/capi
- SecretId
- SecretKey
4、blog-api代码修改
- NBlog-master\blog-api\src\main\java\top\naccl\util\upload下增加工具类TencentCOSUtil.java 具体代码:
package top.naccl.util.upload;
import com.qcloud.cos.COSClient;
import com.qcloud.cos.ClientConfig;
import com.qcloud.cos.auth.BasicCOSCredentials;
import com.qcloud.cos.auth.COSCredentials;
import com.qcloud.cos.http.HttpProtocol;
import com.qcloud.cos.model.ObjectMetadata;
import com.qcloud.cos.model.PutObjectResult;
import com.qcloud.cos.region.Region;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;
import java.io.InputStream;
import java.net.URL;
import java.util.UUID;
//交给IOC容器管理
@Component
public class TencentCOSUtil {
// COS的SecretId
private static String secretId = "xxxxxxxxxxxxxx";
// COS的SecretKey
private static String secretKey = "xxxxxxxxxxxxxxxxxx";
//文件上传后访问路径的根路径，后面要最佳文件名字与类型,最后面的/不要忘了
private static String rootSrc = "xxxxxxxxxxxxxxxxxx/";
//上传的存储桶的地域，可参考根路径https://qq-test-1303******.cos.地域.,此参数在COS的后台能查询。
private static String bucketAddr = "ap-beijing";
//存储桶的名字，是自己在存储空间自己创建的，我创建的名字是：qq-test-1303******
private static String bucketName = "xxxxxxxxxxxxxxxxx";
/**
* 1.调用静态方法getCosClient()就会获得COSClient实例
* 2.本方法根据永久密钥初始化 COSClient的，官方是不推荐，官方推荐使用临时密钥，是可以限制密钥使用权限，创建cred时有些区别
*
* @return COSClient实例
*/
private static COSClient getCosClient() {
// 1 初始化用户身份信息（secretId, secretKey）。
COSCredentials cred = new BasicCOSCredentials(secretId, secretKey);
// 2.1 设置存储桶的地域（上文获得）
Region region = new Region(bucketAddr);
ClientConfig clientConfig = new ClientConfig(region);
// 2.2 使用https协议传输
clientConfig.setHttpProtocol(HttpProtocol.https);
// 3 生成 cos 客户端。
COSClient cosClient = new COSClient(cred, clientConfig);
// 返回COS客户端
return cosClient;
}
/**
* 只要调用静态方法upLoadFile(MultipartFile multipartFile)就可以获取上传后文件的全路径
*
* @param file
* @return 返回文件的浏览全路径
*/
public static String upLoadFile(MultipartFile file) {
try {
// 获取上传的文件的输入流
InputStream inputStream = file.getInputStream();
// 避免文件覆盖，获取文件的原始名称，如123.jpg,然后通过截取获得文件的后缀，也就是文件的类型
String originalFilename = file.getOriginalFilename();
//获取文件的类型
String fileType = originalFilename.substring(originalFilename.lastIndexOf("."));
//使用UUID工具 创建唯一名称，放置文件重名被覆盖，在拼接上上命令获取的文件类型
String fileName = UUID.randomUUID().toString() + fileType;
// 指定文件上传到 COS 上的路径，即对象键。最终文件会传到存储桶名字中的images文件夹下的fileName名字
String key = "images/" + fileName;
// 创建上传Object的Metadata
ObjectMetadata objectMetadata = new ObjectMetadata();
// - 使用输入流存储，需要设置请求长度
objectMetadata.setContentLength(inputStream.available());
// - 设置缓存
objectMetadata.setCacheControl("no-cache");
// - 设置Content-Type
objectMetadata.setContentType(fileType);
//上传文件
PutObjectResult putResult = getCosClient().putObject(bucketName, key, inputStream, objectMetadata);
// 创建文件的网络访问路径
String url = rootSrc + key;
//关闭 cosClient，并释放 HTTP 连接的后台管理线程
getCosClient().shutdown();
return url;
} catch (Exception e) {
e.printStackTrace();
// 发生IO异常、COS连接异常等，返回空
return null;
}
}
}- NBlog-master\blog-api\src\main\java\top\naccl\controller\admin\BlogAdminController.java下增加函数upload
/**
* 上传图片--swz
* 腾讯云cos
*/
@PostMapping("/upload")
public Result upload(MultipartFile image) {
//log.info("正在上传，文件名{}",image.getOriginalFilename());
String url = tencentCOSUtil.upLoadFile(image);
//System.out.println(url);
//log.info("文件的Url：{}",url);
return Result.ok(url);
}5、重新打包管理端blog-cms以及后台blog-api
6、axios发送请求的错误记录
- 正确示例 增加uploadPic方法
//swz 上传图片
export function uploadPic(formdata) {
return axios({
url: 'upload',
method: 'POST',
Headers: {
'Content-Type': 'multipart/form-data'
},
data: formdata
})
}- 错误示例 增加uploadPic方法
//swz 上传图片
export function uploadPic(formdata)
{
return axios(
{
url: 'upload',
method: 'POST',
Headers:
{
'Content-Type': 'multipart/form-data'
},
data:
{
..formdata
}
})
}分析：
1、{...blog } 是一种对象展开语法（Object Spread Syntax）。当你在 axios 的请求配置里使用 data: {...blog } 时，通常意味着你要将 blog 对象里的所有属性及其对应的值提取出来，作为请求体数据发送出去。
2、data: formData这种用法通常用于发送表单数据。FormData是一个用于构建表单数据的 JavaScript 对象，它可以方便地将表单中的键值对（包括文件等）组合起来，然后通过axios发送到服务器。
3、因为上面我定义的formData，var formdata = new FormData();,默认就是表单了，所以使用第一种方法。
