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

2020-04-11  本文已影响0人  染指悲剧



1、html中

<input type="file"  @change="changeflie" />

<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=>{     //请求接口

        }

    }

3、注意

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

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

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

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

上一篇 下一篇

猜你喜欢

热点阅读