我学会了如何通过drf vue axios上传美女。

男生，自习之后，前端和后端是分开的，循序渐进的发展，完成之后前端是填充的。当我们真正投入到现代前端的开发过程中，才发现现在的前端程序员待遇不错，这是我们应该做的。在我们做好所有前端工作之前，只记得前端是一个切割图来写HTML，连交互都没写。我们只是把静态页面交给后端，后端来处理。这也是这些年PHP在web领域流行的一个重要原因。速度快，成本省，一个后端全干，全包，现在不行了。初级后端PHP甚至没有前端受欢迎。说了这么多，我还是想说，前端不能再小视了，有些难，有些磨！
在前端axios vue的后端写一个上传图片的接口不是很简单。只需要将这个字段限制为图片格式，在后台保存逻辑即可。前端处理还涉及到请求头、数据格式处理等。按照老传统把图片按字符串放入界面发现返回的400个错误都是直到我知道了前端的FormData方法！
FormData是什么鬼？通过多方查找和调查，得知这个神奇的东西是XMLHttpRequest Level 2的新对象，是在2008年2月提出的。它可以用来提交表单和模拟表单提交。当然最大的好处是可以上传二进制文件，所有表单元素的名称和值可以组成一个queryString，可以提交到后台。
重要提示：您可以从所有表单元素的名称和值形成一个queryString，并将其提交到后台。这不就是后端所谓的数据格式转换吗？按照格式提交。前端和后端的分离肯定是异步提交，可以很好的解决这个问题！
它也很容易使用。只需将表单form作为参数传入FormData构造函数即可！
在vue和axios的配合下，这将是一场真正的战斗。//api.js//，这是我封装的全局请求方法import {request} from ‘./network/request’//modify用户的头像导出const getmodifyinfo=(params)={ return request({ URL : ‘ ve _ register/1/’，method: ‘put ‘，headers : { ‘ Content-Type ‘ : ‘ multipart/form-data ‘ }，Data: params })}看看上面的代码，发送请求时注意设置请求头。如上图，在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 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 ‘))；//seanfd.append(‘name ‘，’ will ‘)；console . log(FD . get all(‘ name ‘))；//[‘sean ‘，’ will’]has()此方法还接收一个参数，该参数也是键的名称，并返回一个布尔值来确定FormData对象是否包含该键。以上面的表格为例：
console . log(FD . has(‘ name ‘))；//true console . log(FD . has(‘ Name ‘))；//false其他的我就不介绍了。有兴趣的话自己查一下。你再写一遍吗？比看什么文章都实用！