提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
前言
提示:这里可以添加本文要记录的大概内容:
例如:项目中很大概率会有需要做图片上传的需求 通常我们都是储存在阿里云的oss中 一下是一个前端直传的示列
提示:以下是本篇文章正文内容,下面案例可供参考
一、前端直传oss
二、使用步骤
1.调用后端接口拿到上传oss的数据 该函数一般为 组件中的函数 因为需要拿到图片文件 然后就是自己组装oss 的接口 url 和参数 使用axios 发送接口即可 只要oss接口调用成功 code 200了 那么图片就上传上去了 图片的地址 为上传接口参数的的url和key 需要自己拼接 (接口不会返回图片地址给你)
代码如下(示例):
//获取上传成功后的返回图片地址
const getImagesUrl = (file) => {
let uuid = v4();
const photo = file.file; // 获取图片对象
const photoName = file.file.name; // 原图片的名称
const key = 'oss/image/' + uuid + '.png'; // 存储到oss的图片名称 自己定,必须确保唯一性,不然会覆盖oss中原有的文件
ApiUploadPic().then((res) => {
let policy = res.data.policy; // 服务器端同事调oss的API,通过接口返回给前端的 policy
let OSSAccessKeyId = res.data.accessKey; // 服务器端同事调oss的API,通过接口返回给前端的 OSSAccessKeyId
let signature = res.data.signature; // 服务器端同事调oss的API,通过接口返回给前端的 signature。这个就是签名,最关键的。
let url = res.data.uploadUrl;
// biu一下,提交给oss
let param = new FormData();
//param.append('name', `${photoName}`);
param.append('key', `${key}`);
param.append('OSSAccessKeyId', `${OSSAccessKeyId}`);
param.append('policy', `${policy}`);
param.append('signature', `${signature}`);
param.append('success_action_status', '200'); // 不要问为什么,照做
param.append('file', file.file, photoName); // 这个**切记**一定要放到最后去 append ,不然阿里云会一直报 key 的错误
axios
.post(url, param)
.then((res) => {
ImagesUrl.value = url + '/' + key;
})
.catch((err) => {
console.log('err == ', err);
});
});
};
# 总结