前端实现oss上传功能

前端实现oss上传功能：

第一步导入ali-oss

npm install ali-oss

第二步 配置阿里oss的一些参数

let OSS = require('ali-oss')
let client = new OSS({
    region: '你的region',
    accessKeyId: 'oss的id',
    accessKeySecret: '你oss 的密钥',
    bucket: '你的bucket'
})

第三步 使用

export default {
    methods:{
        async handleFileChange(event) {
            const file = event.target.files[0];
            // 我在这里加了个文件的过滤，也可以不加
            if (!file || file.type!== 'image/png') {
                alert('请选择 PNG 格式的图片！');
                return;
            }
            // 设置文件名称 可随意
            const fileName = generateRandomFileName();
            // 上传到指定位置，我是传到了我的oss的m2_photos的文件夹中
            await client.put(`m2_photos/${fileName}`, file);
            const url = client.signatureUrl(`m2_photos/${fileName}`);
            console.log("url为： ", url);
        }
    },
}

// 随机名称的一个方法
function generateRandomFileName() {
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let result = '';
    for (let i = 0; i < 16; i++) {
        result += characters.charAt(Math.floor(Math.random() * characters.length));
    }
    return result;
}

然后就能够在前端使用了

比如说：

<input type="file" @change="handleFileChange" accept=".png" />

就是这么简单~