vue中上传图片至阿里云oss

<template> ?<div class="upload"> ???<div class="oss_file"> ?????<input type="file" :id="id" @change="doUpload"/> ?????<img :src="url" alt=""> ???</div> ?</div></template><script> ?export default { ???name: ‘upload‘, ???data () { ?????return { ???????region: ‘oss-cn-hangzhou‘,根据你买的那个区的做相应的更改 ???????bucket: ‘buket名称‘, ???????id: ‘upload‘, ???????percentage: 0, ???????url:‘‘, ???????urls:[], ???????getToken:{ ??????????sign:‘‘, ???????} ?????} ???}, ???methods:{ ?????doUpload () { ???????const _this = this; ???????const urls = []; ???????_this.$post(‘请求后台接口获取accessKeyId，accessKeySecret和临时验签SecurityToken‘,_this.getToken).then((result) => { ?????????console.log(result); ?????????const client = new OSS.Wrapper({ ???????????region: _this.region, ???????????accessKeyId: result.accessKeyId, ???????????accessKeySecret:result.accessKeySecret, ???????????stsToken: result.SecurityToken, ???????????bucket: _this.bucket ?????????}) ????????_this.percentage = 0; ?????????const files = document.getElementById(_this.id) ?????????if (files.files) { ???????????const fileLen = document.getElementById(_this.id).files ???????????let resultUpload = ‘‘ ???????????for (let i = 0; i < fileLen.length; i++) { ?????????????const file = fileLen[i] ?????????????// 随机命名 ?????????????let random_name = this.random_string(6) + ‘_‘ + new Date().getTime() + ‘.‘ + file.name.split(‘.‘).pop() ?????????????// 上传 ?????????????client.multipartUpload(random_name, file, { ???????????????progress: function* (percentage, cpt) { ?????????????????// 上传进度 ?????????????????_this.percentage = percentage ???????????????} ?????????????}).then((results) => { ???????????????// 上传完成 ???????????????const url = ‘http://buket名称.oss-cn-hangzhou.aliyuncs.com/‘+ results.name; _this.$store.dispatch("changeUrl", _this.url); _this.url = url; console.log(url); }).catch((err) => { console.log(err) }) } } }) }, 

// 随机生成文件名 ?random_string(len) { 　　len = len || 32; 　　var chars = ‘ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678‘; 　　var maxPos = chars.length; 　　var pwd = ‘‘; 　　for (let i = 0; i < len; i++) { 　　pwd += chars.charAt(Math.floor(Math.random() * maxPos)); } return pwd; } }, watch:{ url(val){ if(val){ this.urls.push(val); } } } } 

</script> 

<style lang="less"> .oss_file { height: 150px; width: 150px; border-radius: 50%; // background: red; img{ width:100%; display: inline-block; float: right; } } .oss_file input { right: 0; top: 0; opacity: 0; filter: alpha(opacity=0); cursor: pointer; width: 100%; height: 100%; } </style>