vue上传图片

<div class="row-center">
                    <div class="Default-avatar cur active" @click="setAvater">
                        <img :src="userInfo.avatar || require('./image/Default-avatar.png')" alt="">
                    </div>
                    <input type="file" id="file" v-show="false" />
</div>

setAvater() {
            var file = document.getElementById('file');
　　　　　　　document.getElementById('file').value = null //解决file.onchange只执行一次的问题
            file.click()
            const _this = this
            file.onchange = async function (e) {
                var fileData = e.target.files[0];//获取到一个FileList对象中的第一个文件(File 对象),是我们上传的文件
                var pettern = /^image/;
                console.log(fileData)

                if (!pettern.test(fileData.type)) {
                    _this.$tool.message('图片格式不正确','error')
                    return;
                }
                let formData = new FormData()
                formData.append("file", fileData)
                const res = await axios.post('/api/user/avatar', formData, {
                    // 因为我们上传了图片,因此需要单独执行请求头的Content-Type
                    headers: {
                        // 表示上传的是文件,而不是普通的表单数据
                        'Content-Type': 'multipart/form-data'
                    }
                })
                if(res.data.code === 0){
                    _this.userInfo.avatar = res.data.data
                    _this.setUserInfo({val: _this.userInfo})
                    _this.$tool.message('头像以上传','success')
                }
            }
        }