vue上传图片到阿里云

下载 ali-oss
npm i ali-oss -S
在vue中使用
在main中导入
import oss from ‘ali-oss’
window.oss = oss

在方法中使用:

//这里的四个参数都是后端给的
var client = new oss({
    region: "",
    //云账号AccessKey有所有API访问权限,建议遵循阿里云安全最佳实践,部署在服务端使用RAM子账号或STS,部署在客户端使用STS。
    accessKeyId: "",
    accessKeySecret: "",
    bucket: ""
});
try {
//第一个名字是你要上传的文件的自定义名字,第二个参数是file类型的对象
let resule = await client.put(
    fileName,
    file
);
return resule
} catch(e){
    console.log(e)
}

如果碰到403,并提示跨域,可能是后台cors没有配置好,其他的报错请参考阿里云官方文档

要使用Vue上传图片阿里云OSS,你需要进行以下步骤: 1. 在阿里云OSS上创建一个Bucket,并且获取到AccessKeyId、AccessKeySecret、Bucket名称和Endpoint。 2. 安装ali-oss和vue-ali-oss插件,可以使用npm安装。 3. 在Vue组件中引入vue-ali-oss插件,并且在data中声明阿里云OSS的相关信息。 4. 编写上传图片的方法,使用ali-oss插件进行上传。 下面是一个简单的代码示例,可以供你参考: ``` <template> <div> <input type="file" @change="handleFileUpload"> </div> </template> <script> import OSS from 'ali-oss'; import VueAliOSS from 'vue-ali-oss'; export default { name: 'ImageUploader', data() { return { accessKeyId: 'your_access_key_id', accessKeySecret: 'your_access_key_secret', bucket: 'your_bucket_name', endpoint: 'your_endpoint', file: null }; }, methods: { handleFileUpload(event) { this.file = event.target.files[0]; const client = new OSS({ accessKeyId: this.accessKeyId, accessKeySecret: this.accessKeySecret, bucket: this.bucket, endpoint: this.endpoint }); client.put(this.file.name, this.file) .then(response => { console.log(response); // 在这里处理上传成功后的逻辑 }) .catch(error => { console.log(error); // 在这里处理上传失败后的逻辑 }); } }, mixins: [VueAliOSS] }; </script> ``` 在这个示例中,我们首先在data中声明了阿里云OSS的相关信息,然后在handleFileUpload方法中使用ali-oss插件进行上传。在上传成功后,我们可以在then回调函数中处理上传成功后的逻辑,在上传失败后,我们可以在catch回调函数中处理上传失败后的逻辑。 请注意,这只是一个简单的示例。在实际使用中,你需要根据自己的需求进行更多的配置和处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值