vue的axios请求怎么渲染到页面,axios请求图片
在后端写一个上传图片的接口不是很简单。你只需要把这个字段限定为图片格式，把逻辑保存在后端就可以了。前端处理涉及请求头、数据格式处理等。按照老传统，按字符串放图片进界面发现返回的400个错误都是直到我知道前端的FormData方法！
目录
FormData是什么鬼？在vue和axios的配合下，一波append()set()delete()get()和getAll()有()
FormData是个什么鬼？
通过多方查找和调查，得知这个神奇的东西是XMLHttpRequest Level 2的新对象，是在2008年2月提出的。它可以用来提交表单和模拟表单提交。当然最大的好处是可以上传二进制文件，所有表单元素的名称和值可以组成一个queryString，可以提交到后台。
重要提示：您可以从所有表单元素的名称和值形成一个queryString，并将其提交到后台。这不就是后端所谓的数据格式转换吗？按照格式提交。前端和后端的分离绝对是异步提交，可以很好的解决这个问题！
它也很容易使用。只需将表单form作为参数传入FormData构造函数即可！
在vue和axios的配合下实战一波
！-
在*中上传组件。vue组件
我在这里使用buefy的vue组件。
-
form method= post enctype= multipart/form-data
b-field class= file is-primary :class= { has-name :文件}
b-upload v-model= file class= file-label @ input= getModifyAvatar()
span class=file-cta
b-icon class= file-icon icon= upload /b-icon
span class=file-label 单击以上载/span
/span
文件名 v-if=文件
{{ file.name }}
/span
/b-上传
/b-字段
/表单
脚本
导出默认值{
data(){
返回{
UserInfo: ，//通过get请求将用户相关信息分配给它
文件：空，
}
},
方法：{
//修改头像
getModifyAvatar(){
const formData=new formData()；
//构造formData数据
formData.append(avatar ，this.file)
//提交上传请求
getModifyInfo(formData)。然后(res={
this . userinfo . avatar=RES . data . avatar
})
},
}
}
/脚本
//api.js
//这是我封装的全局请求方法
从导入{请求}./网络/请求
//修改用户头像
export const getModifyInfo=(params)={
退货请求({
url: ve_register/1/，
方法：“put”，
标头：{ Content-Type : multipart/form-data }，
数据：参数
})
}
看上面的代码，注意在发送请求时设置请求头。如上图，在html表单中也需要设置enctype=multipart/form-data ，否则无法工作！
通过上面的例子，我们目前只使用了FormData的append()方法。大多数关于FormData的在线文章只提到append()方法。那么FormData对象有哪些方法呢？事实上，我们知道控制台曾经：
之后我们在console有了重大发现。FormData对象的方法那么多，我们要自己测试一下，找出真相。以下是这些方法的一些解释：
append()
append()方法用于向FormData对象添加一个键值对：
fd.append(key1 ， value 1 )；
fd.append(key2 ， value 2 )；
是一个FormData对象，它可以是新创建的空对象，也可以已经包含一个窗体表单或其他键值对。
set()
设置与相应键key对应的值
fd.set(key1 ， value 1 )；
fd.set(key2 ， value 2 )；
append()方法有点类似。这两种方法的区别在于，当指定的键值存在时，append()方法将最后添加所有新添加的键值对，而set()方法将覆盖之前设置的键值对。或者举个例子，我们在前面形式的基础上追加()或设置()一个新的键值对：
fd.append(name ， will )；
有两个带有键名的键值对：
这就是append()和set()的区别。如果设置的键值不存在，那么两种方法的效果是一样的。
delete()
接收一个指示要删除的键值名称的参数。如果有多个相同的键值，它们将被一起删除：
fd.append(name ， will )；
FD . delete( name )；
表单中的姓名信息和append()添加的姓名信息已被删除。
get() 和 getAll()
接收指示要查找的键的名称的参数，并返回与该键对应的第一个值。如果有多个相同的键，并且希望返回这个键的所有对应的value值。
同样基于上面的表单表单：
fd.append(name ， will )；
console . log(FD . get( name ))；//肖恩
fd.append(name ， will )；
console . log(FD . get all( name ))；//[肖恩，威尔]
has()
该方法还接收一个参数，该参数也是键的名称，并返回一个布尔值来确定FormData对象是否包含该键。以上面的表格为例：
console . log(FD . has( name ))；//真
console . log(FD . has( Name ))；//假
其他就不介绍了。有兴趣的请自己验证，再写一遍，再敲一遍。比看什么文章都真实！
如果上面的文章对你有帮助，请给我们的开源项目打个小星星：github.crmeb.net/u/xingfu非常感激！
以上是Vue用axios上传图片时遇到的问题细节。更多关于Vue用axios上传图片的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。