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

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

在ant design 和element UI中，都有上传组件，但是有时满足不了项目需求，记录下碰到得问题及解决方法

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了

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