前端vue直传oss图片

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

例如：项目中很大概率会有需要做图片上传的需求 通常我们都是储存在阿里云的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);
      });
  });
};

# 总结