应用场景
直传图片和视频到阿里云
image.png
实现方法
安装ali-oss
npm install ali-oss
自定义文件夹创建oss.js文件
const OSS = require('ali-oss')
export function client (data) {
// 后端提供接口
return new OSS({
region: 'oss-cn-hangzhou',
accessKeyId: data.accessId,
accessKeySecret: data.assessKey,
stsToken: data.securityToken,
bucket: data.bucket
})
}
element-ui 上传组件
<el-upload
class="upload-demo"
multiple
action=""
:before-upload="beforeUpload"
:http-request="doUpLoad"
:show-file-list = false>
<i class="el-icon-upload2"> 上传图片</i>
<div slot="tip" class="el-upload__tip">只能上传jpg/png/jpeg文件</div>
</el-upload>
JS部分
// 先导入js文件
import { oss } from './../../../tools/oss.js'
data () {
return {
dataObj: {} // 存签名信息
}
},
methods: {
beforeUpload (file) {
// 上传之前对文件做些格式和大小的限制
// 这里是请求后台的签名接口
return new Promise((resolve, reject) => {
this.$axios({
method: 'post',
url: 'url',
data: data
}).then(res => {
this.dataObj = res
resolve(true)
})
})
},
// 执行上传到阿里云的动作
doUpLoad (file) {
// 这边写你上传到阿里云必须的参数
const self = this
let files = file.file
this.fileKey = this.getNumber(32) + suffix
client(this.dataObj).multipartUpload(this.fileKey, file.file).then(result => {
self.$message({
message: '上传成功',
type: 'success',
duration: 30
})
})
},
}
网友评论