前端vue直传oss图片

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

文章目录

  • 前言
  • 一、前端直传oss
  • 二、使用步骤
    • 1.调用后端接口拿到上传oss的数据 该函数一般为 组件中的函数 因为需要拿到图片文件 然后就是自己组装oss 的接口 url 和参数 使用axios 发送接口即可 只要oss接口调用成功 code 200了 那么图片就上传上去了 图片的地址 为上传接口参数的的url和key 需要自己拼接 (接口不会返回图片地址给你)


前言

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

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


# 总结

你可能感兴趣的:(前端,前端,vue.js,javascript)