vue2写上传文件到oss
时间: 2023-11-04 10:52:47 浏览: 38
在Vue2中上传文件到OSS,你可以使用ali-oss SDK,以下是一个示例代码:
首先,安装ali-oss SDK:
```bash
npm install ali-oss --save
```
然后,创建一个OSS客户端实例:
```javascript
import OSS from 'ali-oss';
const client = new OSS({
region: 'your_region',
accessKeyId: 'your_accessKeyId',
accessKeySecret: 'your_accessKeySecret',
bucket: 'your_bucket'
});
```
接下来,创建一个上传函数:
```javascript
async function uploadToOSS(file) {
const fileName = file.name;
const result = await client.put(fileName, file);
// result.url包含了上传后的文件的URL
// 可以将该URL存储到数据库中,供其他用户访问
return result.url;
}
```
最后,你可以在Vue组件中调用该函数来上传文件:
```javascript
<template>
<div>
<input type="file" @change="handleFileChange">
</div>
</template>
<script>
import OSS from 'ali-oss';
export default {
data() {
return {
client: null,
file: null
};
},
created() {
this.client = new OSS({
region: 'your_region',
accessKeyId: 'your_accessKeyId',
accessKeySecret: 'your_accessKeySecret',
bucket: 'your_bucket'
});
},
methods: {
async handleFileChange(event) {
this.file = event.target.files[0];
const url = await this.uploadToOSS(this.file);
console.log(url);
},
async uploadToOSS(file) {
const fileName = file.name;
const result = await this.client.put(fileName, file);
// result.url包含了上传后的文件的URL
// 可以将该URL存储到数据库中,供其他用户访问
return result.url;
}
}
};
</script>
```
以上是一个简单的上传文件到OSS的Vue组件示例。