vue 单张图片上传

<div id="avatarimg">

  <img :src="avatar"/>
  
  <input @change="upavatarimg" type="file" name="" id="" value="图片上传预览" />
  <div id="warning"></div>
</div>

export default {

		name: 'avatarimg',

		data() {
			return {
				avatar:"",
                imgType: {
					type: 'image/gif, image/jpeg, image/png, image/jpg',
				}, //图片格式
			}
		},

		methods: {
                    upavatarimg: function(e) {
            		
            		var _this=this
            		
				
					var avatarImg = e.target.files[0]
					var avatarImgsize = avatarImg.size
					var avatarImgtype = avatarImg.type
                     //验证图片格式
					if(this.imgType.type.indexOf(avatarImgtype) == -1) {

						document.getElementById("warning").innerHTML = "请选择正确的图片格式"
						return false;
					} else if(avatarImgsize > 5242880) {   //验证图片大小 5M

						document.getElementById("warning").innerHTML = "图片大小不能超过5M"
						return false;
					} else { 

						document.getElementById("warning").innerHTML = ""
                        var avatarData = new FormData();
					    avatarData.append('files', avatarImg); //图片
                  
					
				     //向后台发送请求 提示：axios 需要安装插件
					_this.axios({
						method: 'post',
						
						url: '接口',
                        
						data: "",//data里面填入图片资源 avatarData，注意传值方式由后台定义

					}).then(function(res) {
					
						console.log(res.data)
                       _this.avatar="请求返回来的图片路径"

							 
					}).catch(function(err) {
						console.log(err)
						 
					})
						

						
					}

					

					}

				},
         
         

 


		components: {

			
		},
		mounted: function() {

		}
	}