前端上传图片到oss对象存储

最新推荐文章于 2025-06-24 10:17:00 发布

是小芬达啊

最新推荐文章于 2025-06-24 10:17:00 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_52921391/article/details/113878792

本文介绍如何使用Vue和Ant Design配合阿里OSS进行用户头像的安全存储，包括获取授权、上传流程及URL获取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后台不想把所有东西都放在服务器，也出于用户安全考虑
让前端把用户上传头像时上传到oss对象存储中，后台去取前端再通过接口获取url显示上传的头像
废话不说，下面直接贴代码

这里使用vue+ant design实现
使用上传组件

html部分

//oss.client.js
const OSS = require('ali-oss');
 
export default function Client(data) {
    //后端提供数据
    return new OSS({
        region: data.region,  //oss-cn-beijing-internal.aliyuncs.com
        accessKeyId: data.accessKeyId,
        accessKeySecret: data.accessKeySecret,
        stsToken: data.stsToken,
        bucket: data.bucket
    })
}

js部分

import Client from "@/oss/client";
export default {
  data() {
    return {
      avatar: null,
      headers: {
        authorization: "authorization-text",
        token: this.$ls.get("token"),
      },
      dataObj: {}
    };
  },
  methods: {
  //获取用户信息
    getUserInfo() {
      this.$api.getUserInfo().then((res) => {
        // console.log(res)
        if (res.success) {
          this.form.schoolNum = res.data.schoolNum;
          this.form.phone = res.data.phone;
          this.form.name = res.data.name;
          this.id = res.data.id;
          this.avatar = res.data.avatar;
        }
      });
    },
    //获取Sts临牌
    getStsInfo() {
      //获取Token
      this.$api.getStsInfo().then((res) => {
        // console.log(res);
        if (res.success) {
          const {
            region,
            Bucket,
            AccessKeyId,
            AccessKeySecret,
            SecurityToken,
          } = res.data.data;
          this.dataObj = {
            region: region,
            bucket: Bucket,
            accessKeyId: AccessKeyId,
            accessKeySecret: AccessKeySecret,
            stsToken: SecurityToken,
          };
          return true;
        }
      });
    },
    //上传文件之前的操作
    beforeUpload(file) {
      this.getStsInfo();
      const isLt50M = file.size / 1024 / 1024 < 50;
      if (!isLt50M) {
        this.$message.error("文件不能大于50M");
      }
      return isLt50M;
    },
    //上传文件
    handleChange(info) {},
    //上传图片到oss
    async customRequest(action) {
      try {
        const client = Client(this.dataObj),
          file = action.file;
        //修改命名
        var fileExtension = file.name.substring(file.name.lastIndexOf(".") + 1);
        const random_name = "avatar/" + this.id + "_" + "avatar." + fileExtension;
        let result = await client.put(random_name, file);
        // console.log(result);
        if (result.res.statusCode === 200) {
          this.$api.updateAvatar({ avatar: random_name, id: this.id }).then((res) => {
            //更新成功
            if (res.success) {
              //获取头像
              this.$api.getAvatarUrl({ avatar: random_name }).then((res) => {
                // console.log(res);
                if (res.success) {
                  this.$message.success("上传成功");
                  this.getUserInfo();
                }
              });
            }
          });
        }
      } catch (error) {
        this.$message.error("上传失败");
      }
    },
  },
  created() {
    this.getUserInfo();
    this.getStsInfo();
  },
}