Vue使用type=‘file‘上传头像

vue使用type='flie'上传文件：也可以使用ref获取到文件的信息

1.首先要获取到图片信息；2.通过发送请求将图片信息传递给后端，后端会进行图片上传的操作；

<div>
      <lable>头像上传：</label>
      <input type='file' @change="updateImages($event)"/>
</div>


updateImages(event){
      //1.获取图片信息
       const files = event.target.files;
       const id = new FormData();//将图片的信息存到FormData上;

       //使用append存储信息，append('键名','键值')
       fd.append('file',files[0]);
       //发送请求
}

在vue中使用原生的文件上传的方法时，可以将input样式隐藏掉，通过获取到节点的方法从而触发到click()事件

    <div class="headr">
        <img :src="viewerImage(item.image)" alt=""></div>
        <i class="iconfont dzyjqiehuan" @click.stop="upLoadEX"></i>
        <input type="file" id="uploadImage" @change="(e)=>handleUpload(e)" 
         style="display: none">
   </div>

 
       /*触发上传的按钮*/
        upLoadEX() {
            document.getElementById('uploadImage').click()
        },
        /*文件上传*/
        handleUpload(e) {
            let files = e.target.files;
            if (/.jpeg|.bmp|.png|.JPEG|.jpg|.webp/.test(files[0].name)) {
                let formData = new FormData();
                for (const item of files) {
                    formData.append('file', item);
                    formData.append('token', commonConfig.getCookie('token'));
                }
                commonConfig.ajaxUploadHttp('user/updateAvatar', formData, res => {
                    if (res) {
                        this.$message.success('图像上传成功');
                        this.getUserInfo();
                    } else {
                        this.$message.info('上传失败');
                    }
                }, null, 'POST')
            }

        },