- 注册阿里云oss 账号 地址(https://www.aliyun.com/)
- 创建Bucket
3.设置Bucket (允许跨域)
4. 生产accessKeyId 和 accessKeySecret
5. 创建vue项目,并安装ali-oss
npm install ali-oss --save 或者 cnpm install ali-oss --save
6.单文件上传 简易示例代码如下:
<template>
<div>
<el-upload
class="avatar-uploader"
action=""
:http-request="beginUpload"
:show-file-list="false">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<el-progress :percentage="Number(percentage.toFixed(2))"></el-progress>
<el-button @click="pauseUpload">暂停</el-button>
<el-button @click="goonUpload">继续</el-button>
</div>
</template>
<script>
import OSS from 'ali-oss'
export default {
components: {},
data () {
return {
imageUrl: '',
percentage: 0,
checkpoint: null,
client: null,
filename: ''
}
},
computed: {
},
created () {
this.client = new OSS({
region: 'oss-cn-hangzhou',
accessKeyId: '<Your AccessKeyId>',
accessKeySecret: '<Your AccessKeySecret>',
bucket: 'Your bucket name',
secure: false
})
},
methods: {
async ossUpload (filename, file) {
let _this = thi