美文网首页
vue使用input标签 type='file'上传文件

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

作者: 染指悲剧 | 来源:发表于2020-04-11 20:58 被阅读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了

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

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/wqlpmhtx.html