前提:已经在腾讯云中配置好了存储桶
第一步:下载yarn add cos-js-sdk-v5
第二步:在vue文件中引入
第三步:在获取到上传文件的信息处,调用一下方法(此处以vant中的上传做为演示)
afterRead (file) {
// 此时可以自行将文件上传至服务器
console.log(file)
// 进行腾讯云上传
cos.putObject({
Bucket: '*********', // 存储桶名称
Region: '*******', // 存储桶所在地域(英文的)
Key: file.file.name, // 文件名称
StorageClass: 'STANDARD', // 上传模式
Body: file.file, // 上传文件对象
onProgress: progressData => { // 文件上传中执行的函数
}
}, (err, data) => { // 文件上传或失败执行的函数,注意修改为箭头函数,否则函数中this的指向不是vue实例
console.log(data)
console.log(err)
if (data.statusCode === 200) {
const url = `https://${data.Location}`// 把获取到的路径进行模版字符串拼接
const obj = {
url: url
}
this.fileList.push(obj)
}
})
}