garen-upload
组件功能
- 点击上传
- 根据slot自定义上传样式
示例
<template>
<div>
<garen-upload @change="handleChange" :accept="accept" :multiple="multiple">
<button v-if="!showHeader" class="upload-button">上传</button>
<img v-else class="upload-header" ref="uImg" alt="头像">
</garen-upload>
</div>
</template>
<script>
export default {
data() {
return {
accept:'image/*', // 调用相机对应input accept选项
capture:'camera', // 对应input capture选项
multiple:false, // 非多选
showHeader:false, // 切换展示图片和上传按钮
};
},
components: {},
computed: {},
mounted() {},
methods: {
handleChange(files){
this.fileToBase64(files)
this.showHeader = true
console.log(files)
},
fileToBase64(files){
const file = files[0];
//判断是否是图片类型
if (!/image\/\w+/.test(file.type)) {
alert("只能选择图片");
return false;
}
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = ()=>{
this.$refs.uImg.src = reader.result
}
}
}
};
</script>
<style scoped>
.upload-header{
display: block;
height:200px;
width:200px;
margin:100px auto;
border-radius: 50%;
}
.upload-button{
display: block;
height:50px;
width:100px;
margin:100px auto;
border:1px solid gray;
}
</style>
API
参数 | 类型 | 说明 | 备注 |
---|---|---|---|
:accept | String | input accept属性 | |
:capture | String | input capture属性 | |
:multiple | Boolean | input multiple属性 | 是否多选 |
:prevent | Boolean | 是否开启选择文件功能 | 纯展示时可开启阻止upload功能 |
@change | Function | 获取文件列表 | 可获取选择的文件列表 |