Vue项目实现文件上传到OSS

0 引言

• 需求：实现文件上传到云端
• OSS：阿里云提供的一项对象存储服务，我买的就几块钱，也不贵

1 在阿里云上购买OSS服务然后进行配置

1.1 创建Bucket

• Bucket名称自定义
• 地域为购买时选择的地域
• 权限改为公共读写
• 其余可以默认

1.2 权限管理->跨域设置

• 创建规则
• 来源可以指定也可以用*指定全部来源
• 允许methods可以指定也可以全部勾选
• 允许Headers写*
• 其余默认即可

1.3 创建 AccessKey

• 在阿里云头像处点击AccessKey管理
• 根据自身需求创建获取AccessKey

2 Vue中使用OSS

2.1 安装

• npm i ali-oss -D (安装到生产依赖)

2.2 引入

• const OSS = require(“ali-oss”);

2.3 使用

<div id="top">  // 页面显示内容
    <img :src='headPortraitSrc' width="30px" height="30px"> // 一个图片（例如头像）
    <input type="file" ref="imageInput"> // 文件选择框
    <button v-on:click="upload()">提交</button> // 调用自定义的函数
</div>

methods: {
    upload:function() {
        let client = new OSS({
            // 以下信息可以在阿里云上查看
            region: 'oss-cn-beijing', // 服务器集群地区
            accessKeyId: 'xxx', // accessKeyId
            accessKeySecret: 'xxx', // accessKeySecret
            // stsToken 可以不写但是不安全
            // stsToken: 'xxx', // 签名token 
            bucket: 'xxx' // 阿里云上存储的 Bucket名称
        })
        let path = "/test2.png"; // 路径以及文件名，根据需求定义
        const file = this.$refs.imageInput.files[0] // 获取文件
        // console.log(file)
        var response =  client.put(path,file) // 上传并获取响应
        response.then(res => { // 获取返回的文件url
            // console.log(res.url)
            this.headPortraitSrc = res.url // 并设置给页面上图片所绑定的源
        })
        // console.log(response)
    }
}

Bald Monkey
2022年1月6日18点57分