vue使用input标签 type=file 上传图片 上传文件

vue使用input标签 type="file"上传文件

1、html中

<input type="file"  @change="changeflie" />      //type为file
<input type="file"  @change="changeflie" accept="image/*" />   //限制上传格式accept
<input type="file"  @change="changeflie"  multiple />   //可多选multiple 

2、js

   changeflie(event){
        var files = event.target.files[0]        //获取文件         
        let formData = new FormData(); 
        formData.append('file', files);         //file  是你接口参数名
        api.upload(formData).then(res=>{     	//请求接口
        	console.log(res)
        }
    }

3、注意

该api接口需要单独配置请求头headers

  headers: { "Content-Type": "multipart/form-data" }

4、成功后会返回图片的地址，就ok了

如果你做的是上传头像的功能，并且要对图片进行裁剪，推荐个不错的插件