100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > vueaxios上传文件到服务器 vue+axios上传图片文件和数据

vueaxios上传文件到服务器 vue+axios上传图片文件和数据

时间:2019-07-02 13:55:40

相关推荐

vueaxios上传文件到服务器 vue+axios上传图片文件和数据

项目中需要上传图片到服务器。最初思路使用input选择图片后获取base64,直接传送base64编码到后台。

在change方法里边通过FileReader()获取base64就完事了.

headImgChange( e ) {

let self = this;

let reader = new FileReader();

reader.readAsDataURL( e.target.files[ 0 ] );

reader.onload = function ( e ) {

self.headImg = e.target.result; //img base64

}

}

后面在axios.put的时候才知道后台同学使用的Django检验的是一个文件流,大概是文件流吧,据他说法需要用form表单提交.

为了顺便弄清楚form表单和ajax,决定用ajax代替form表单提交上传文件。

最浅显的区别就是form有action属性,会发生页面跳转刷新,ajax则异步请求,刷新局部。

于是一查,使用new formData();可以实现表单提交;

let data = new FormData();

data.append("user_pic",userPic); //图片

data.append("gender",gender === "男"? 1 : 0); //性别

data.append("mobile",phone); //手机号码

data.append("nickname",username); //

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。