vue 上传图片到阿里云(前端直传：不推荐)

为何要这样做:减轻后端数据库压力(个人觉得于前端没啥用，谁返回来都行)

---

代码部分：


<template>
<div class="upLoad">
<div class="file">上传图片
<input type="file" :accept="typeArr" @change="upload($event)">
</div>
</div>
</template>
<style lang="less" scoped>
.file {
position: relative;
left: .26rem;
top: .2rem;
display: inline-block;
background: #32d582;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: white;
text-decoration: none;
text-indent: 0;
line-height: 20px;
} .file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
</style>
<script>
export default{
props: ['typeArr', 'size'],
data(){
return {
client: '',
fileSize: 5000000
}
},
methods: {
getRight(){
if (this.size) {
this.fileSize = this.size;
}
this.client = new OSS.Wrapper({
region: "同endpoint",
secure: true,//https
endpoint: '运维会告诉你',
accessKeyId: "id和secret去阿里云控制台获得",
/*accessKeyId,accessKeySecret两者到阿里云控制台获得*/
accessKeySecret: "",
bucket: '' /*装图片的桶名*/
});
},
/**上传图片**/
upload(event){
var self = this;
var file = event.target.files[0]; var type = file.name.split('.')[1];
var storeAs = new Date().getTime() + '.' + type;
var boolean = true;
if (file.size > this.fileSize) {
Toast('亲,图片不能超过!' + this.fileSize / 1000 + 'kb');
return false;
}
if (this.typeArr && this.typeArr.indexOf(type) > 0) {
boolean = false;
}
if (boolean) {
Toast('上传图片格式不支持!请选择' + this.typeArr);
return false;
}
this.getRight();
this.client.multipartUpload(storeAs, file).then(function (result) {
console.log(result)//至此就拿到了返回的路径 self.data.url = result.res.requestUrls[0].split('?')[0]; }).catch(function (err) { console.log(err);
}); },
}
}
</script>

父组件调用


<up-Load class="files" typeArr="image/png,image/jpg,image/gif,image/jpeg" size="500000">
</up-Load>


注：需引入官网推荐的oss对象的cdn


<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>


需再次强调的是:该代码为前端直传,accessKeyId,accessKeySecret都暴露在外面，更安全的方法可见官网的“服务端签名后上传”(貌似没示例)

原文地址：https://segmentfault.com/a/1190000013153127