vue 前端上传图片组件
<template>
<div class="update">
<!-- 通过input获取文件 ，为了美观使用v-show="false" 将input隐藏 通过input的change事件绑定fileChange-->
<input type="file" v-show="false" accept="image" ref="input" @change="fileChange($event.target.files)">
<!-- 通过$refs操作input的点击事件，调起文件选择 -->
<div @click="$refs.input.click()">
<!-- 通过slot内容分发将头像的显示交给父组件,父组件可以自定义图片样式 -->
<slot></slot>
</div>
</div>
</template>
<script>
/*
auth:袁
作用:文件上传
返回事件: file
返回事件参数: file对象
*/
export default {
methods: {
fileChange(files) {
/* 通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。
它可以更灵活方便的发送表单数据，因为可以独立于表单使用。如果你把表单
的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式
和表单通过submit() 方法传输的数据格式相同*/
// 你可以自己创建一个FormData对象，然后通过调用它的append()方法添加字段，就像这样：
let formData = new FormData();
formData.append('thumb', files[0]);
//由于我的请求接口需要openid所以需要再次向FormData对象添加openid字段，如果你们不需要可以不用此操作
formData.append('openid', localStorage.getItem('openid'));
// 向父组件传递参数，事件为fileChange，参数为formData对象
this.$emit('fileChange', formData)
},
}
}
</script>
组件使用
1.导入注册
import Update from '@/components/update'
在 对象局部注册该组件 components: {
Update,
},
2.页面使用
< !--父组件通过fileChange事件用于接收子组件的派发事件 -->
<Update @fileChange="fileChange" >
<!--这里是slot自定义内容 -->
<img :src="img" alt="" class="info">
</Update>
3.事件处理
fileChange(file) {
// 因为file是个FormData格式的对象所以可以直接通过接口开始上传，不需要做多余操作
this.axios.post('/upload/thumb', file).then(res => {
console.log(res.data.datas)
this.img = this.HTTP + res.data.datas
}, err => {
console.log(err)
})
},
