<template>
<div class="vui_alioss_upload">
<div @click="uloadImg()"><slot></slot></div>
<div class="vui_alioss_file">
<input ref="vui_alioss_file" type="file" :id="id" @change="doUpload()"/>
<img :src="url" alt="">
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'upload',
props:['url'],
data() {
return {}
},
methods: {
uloadImg(){
this.$refs['vui_alioss_file'].click()
},
doUpload(e){
let _this = this,file = this.$refs['vui_alioss_file'].files[0]
if(!file || file.length<1) return
axios({
method: 'get',
url:_this.url,
withCredentials:true
}).then(res=> {return res.data}).then(data=>{
_this.upLoadOss(Object.assign({},data.data,{file:file}))
})
},
upLoadOss(data){
var request = new FormData(),_this= this;
request.append("OSSAccessKeyId",data.accessid);//Bucket 拥有者的Access Key Id。
request.append("policy",data.policy);//policy规定了请求的表单域的合法性
request.append("Signature",data.signature);//根据Access Key Secret和policy计算的签名信息,OSS验证该签名信息从而验证该Post请求的合法性
request.append("key",data.dir+data.file.name);//文件名字,可设置路径
request.append("success_action_status",'200');// 让服务端返回200,不然,默认会返回204
request.append('file', data.file);//需要上传的文件 file
axios({
method: 'post',
url:data.host,
data: request,
}).then(res=> {return res.data}).then(rst=>{
_this.$emit('upLoadImgEnd',data.host+'/'+data.dir+data.file.name)
})
}
}
}
</script>
<style scoped>
.vui_alioss_upload{display: inline-block;}
.vui_alioss_upload >div{display: inline-block;}
.vui_alioss_upload .vui_alioss_file{height: 0;overflow: hidden}
</style>
<FileUpload :url="getassessurl" v-on:upLoadImgEnd="upLoadImgEnd">
<img v-if="imgUrl" :src="imgUrl" alt="">
<p v-if="!imgUrl">点击上传图片</p>
</FileUpload>
个人博客 :很多好用的 npm 包 , 可以看看 https://gilea.cn/
github: https://github.com/longfei59418888/vui (记得给一个 start,以后有一起讨论,各种好组件)