1、单图片上传
要实现图片上传，首先要知道上传文件的时侯，表单或则恳求递交的形式。
post递交的默认恳求头是application/x-www-form-urlencoded;charset=UTF-8，这种方式是将参数以通配符对的形式递交到后台，像下边这样。后台接收的时侯只须要使用ctx.request.body来接收前台传来的参数。
但是这些恳求头是能否传通配符对，不能上传文件，要想上传文件就只能将恳求头设置为
hearder:{ content-type:multipart/form-data }
这是一种上传二进制文件的方式，能够获取input为file里的文件内容，作为请求体里的内容发送给后台。那么问题来了，怎么取到这个file文件？
第一种方式，直接在form表单里递交，为form表单设置恳求头，比如下边这样：
action是要递交到后台的插口，method是递交的方式，默认是get，这个不能忘记写！
在form表单里，为数组添加name,value属性，作为后台接受的数组。name是后台要接收的恳求的参数，value是这个name对应的值，这两个在一起相当于传给后台了一个通配符对。具体看右图：
前端发送的form表单
后台接收的时侯才能获取到这种通配符对，然后进行相应的操作。
表单中上传图片应当是最简单的方式，因为只须要给input添加一个name属性即可
这时候后台须要先处理这个图片，将图片保存到本地，需要
1、下载一个包 @koa-multer,下面是模块的相应配置，保存文件，给文件重命名，为了保证图片不会有重复。
2、在router引用这个upload文件，在路由写入方式，处理上传的文件，名字是前台文件的name值
3、取文件名子，ctx.req.file.filename ，处理数组存进数据库
注意，如果图片，文字混和上传，获取文字内容就须要使用ctx.req.body（这个暂时还没找到缘由），单纯的上传通配符对，用ctx.request.body
步骤1、
步骤2、
步骤3、
第二种方式：将这种值写在一个对象里，作为参数传给后台
比如这样，将对象作为post递交的参数，后台一样的接收。
获取input file中文件内容时须要在input框绑定ref,用来获取元素，通过this.$refs.code.files[0]获取文件内容，具体时间哪些内容可以复印，看的更直观。
这种方式的用处在于可以接受成功的反弹，进行后续的一些操作，比如跳转，或者接受状态码等等。缺点在于要把所有的数组重新拿过来，重新形参。
在上传二进制文件时须要设置恳求头header,像前面提及的的一样。
第三种方式：formData
首先须要了解formData究竟是个哪些东西，可以看做他就是一种form表单递交的另外一种方式，它提供的formData就能帮助我们进行文件二进制的编码，他默认的恳求头就是二进制传输，所以我们省去了添加恳求头的操作。下面瞧瞧如何使用
三部曲：
1、实例化一个formData
2、为这个对象添加内容
3、将这个对象作为陈清秋参数发送
.
可以看见实例化的fd有一个自带的方式，append。它的作用就是往这个对象中添加文件集合，可以进行多次append，但是要记住你添加的次序，因为后台在解析的时侯须要拿相应的file文件。
接着上面的图来继续说多图片上传
不管是多图片还是哪些文件上传，其原理就是把所有的file文件作为一个集合，可以说是一个链表，集体传给后台，后台领到集合，再解析下来每一项，得到想要的值。
按照这个思路，其实第一种方案，就是直接在form表单里传值是最简单的方式。把每一个input type=file的文件的name值都写成一样的，比如：
//这个例如是一个单张的图片
//multiple是容许多个图片的file外置的属性 这个例如是一组图片
//比如这个是一个压缩包
现在就有了三种类型的文件，比如到最后form表单共传了4个文件，后台接收到四个文件，只须要分别解析下来即可
单文件多文件区别就在于，单文件是upload.single 多文件是upload.array 意思是接收到一个链表，第二个参数是文件数目的限制。
再说一下使用formData传递参数
和上个方式一样的场景，上传四个文件，下图是多个图片上传的一个组件
我如今要传递一个单独的一个图片文件，一个单独的压缩包文件，一个多图的组合文件。可以想到formData的一个append方式，把各个文件添加到实例化后的formdata中
再瞧瞧这张图，data是表单中的通配符对的参数，fd被append了三次，多图上传那种又是一个两张图片的一个集合，现在就是有了四个文件在fd中。
现在要把二进制文件和普通文件一齐上传，在axios的post中可以将参数放到params中，作恳求头的参数，后台使用query接收参数，而文件和上图一样接收。
