vue 上传文件到阿里云OSS

Kinder

1、安装ali-oss依赖
npm install ali-oss

2、在页面引入ali-oss依赖
let OSS = require('ali-oss');

3、创建对象,通过后端接口获取阿里云的信息

var client = new OSS({
    region: res.region, //地域
    accessKeyId: res.accessKeyId, //你自己的key和id
    accessKeySecret: res.accessKeySecret,
    bucket: res.bucket, //oss上你的存储空间名称
    secure: true,
})

4、最后通过client.multipartUpload方法上传文件到阿里云OSS,获取文件链接

multipartUpload第一个参数设置oss对应文件夹的路径 + 文件名
例如:const filePath = 'pages/home/images/test.jpg'

fileObj是file对象

client.multipartUpload(filePath, fileObj).then(res => {
    //  返回的url需要处理
    let url = res.res.requestUrls[0]
    if(url.indexOf("?") != -1){
        url = url.split("?")[0];
        console.log(url);
    }
}).catch(err => {
    console.log('上传失败')
})

另外,oss需要设置一下跨域的问题,在阿里云oss平台的基础设置里面,把读写权限改为公共读。

阅读 846

前端工程师

74 声望
1 粉丝
0 条评论

前端工程师

74 声望
1 粉丝
文章目录
宣传栏