1啥繁、單圖片上傳
要實(shí)現(xiàn)圖片上傳月弛，首先要知道上傳文件的時(shí)候鸥咖，表單或者請(qǐng)求提交的方式符喝。
post提交的默認(rèn)請(qǐng)求頭是application/x-www-form-urlencoded;charset=UTF-8谤祖，這種方法是將參數(shù)以鍵值對(duì)的方式提交到后臺(tái)婿滓，像下面這樣。后臺(tái)接收的時(shí)候只需要使用ctx.request.body來接收前臺(tái)傳來的參數(shù)粥喜。
但是這種請(qǐng)求頭是能夠傳鍵值對(duì)凸主，不能上傳文件，要想上傳文件就只能將請(qǐng)求頭設(shè)置為
hearder:{? ? content-type:multipart/form-data? ? }
這是一種上傳二進(jìn)制文件的方法额湘，能夠獲取input為file里的文件內(nèi)容卿吐，作為請(qǐng)求體里的內(nèi)容發(fā)送給后臺(tái)。那么問題來了锋华，怎么取到這個(gè)file文件嗡官？
第一種方法，直接在form表單里提交毯焕，為form表單設(shè)置請(qǐng)求頭衍腥，比如下面這樣：
action是要提交到后臺(tái)的接口，method是提交的方法纳猫，默認(rèn)是get婆咸，這個(gè)不能忘記寫！
在form表單里芜辕，為字段添加name,value屬性尚骄，作為后臺(tái)接受的字段。name是后臺(tái)要接收的請(qǐng)求的參數(shù)侵续，value是這個(gè)name對(duì)應(yīng)的值乖仇，這兩個(gè)在一起相當(dāng)于傳給后臺(tái)了一個(gè)鍵值對(duì)憾儒。具體看下圖：
前端發(fā)送的form表單
后臺(tái)接收的時(shí)候就能獲取到這些鍵值對(duì)，然后進(jìn)行相應(yīng)的操作乃沙。
表單中上傳圖片應(yīng)該是最簡(jiǎn)單的方法起趾，因?yàn)橹恍枰oinput添加一個(gè)name屬性即可
這時(shí)候后臺(tái)需要先處理這個(gè)圖片，將圖片保存到本地警儒，需要
1训裆、下載一個(gè)包 @koa-multer,下面是模塊的相應(yīng)配置，保存文件蜀铲，給文件重命名边琉，為了保證圖片不會(huì)有重復(fù)。
2记劝、在router引用這個(gè)upload文件变姨，在路由寫入方法，處理上傳的文件厌丑，名字是前臺(tái)文件的name值
3定欧、取文件名字，ctx.req.file.filename 怒竿，處理字段存進(jìn)數(shù)據(jù)庫(kù)
注意砍鸠，如果圖片，文字混合上傳耕驰，獲取文字內(nèi)容就需要使用ctx.req.body（這個(gè)暫時(shí)還沒找到原因）爷辱，單純的上傳鍵值對(duì)，用ctx.request.body
步驟1朦肘、
步驟2饭弓、
步驟3、
第二種方法：將這些值寫在一個(gè)對(duì)象里媒抠，作為參數(shù)傳給后臺(tái)
比如這樣示启，將對(duì)象作為post提交的參數(shù)，后臺(tái)一樣的接收领舰。
獲取input file中文件內(nèi)容時(shí)需要在input框綁定ref,用來獲取元素夫嗓，通過this.$refs.code.files[0]獲取文件內(nèi)容，具體時(shí)間什么內(nèi)容可以打印冲秽，看的更直觀舍咖。
這種方法的好處在于可以接受成功的回調(diào)，進(jìn)行后續(xù)的一些操作锉桑，比如跳轉(zhuǎn)排霉，或者接受狀態(tài)碼等等。缺點(diǎn)在于要把所有的字段重新拿過來民轴，重新賦值攻柠。
在上傳二進(jìn)制文件時(shí)需要設(shè)置請(qǐng)求頭header,像前邊提到的的一樣球订。
第三種方法：formData
首先需要了解formData到底是個(gè)什么東西，可以看做他就是一種form表單提交的另外一種方法瑰钮，它提供的formData能夠幫助我們進(jìn)行文件二進(jìn)制的編碼冒滩，他默認(rèn)的請(qǐng)求頭就是二進(jìn)制傳輸，所以我們省去了添加請(qǐng)求頭的操作浪谴。下面看看怎么使用
三部曲：
1开睡、實(shí)例化一個(gè)formData
2、為這個(gè)對(duì)象添加內(nèi)容
3苟耻、將這個(gè)對(duì)象作為陳清秋參數(shù)發(fā)送
可以看到實(shí)例化的fd有一個(gè)自帶的方法篇恒，append。它的作用就是往這個(gè)對(duì)象中添加文件集合凶杖，可以進(jìn)行多次append胁艰，但是要記住你添加的順序，因?yàn)楹笈_(tái)在解析的時(shí)候需要拿相應(yīng)的file文件智蝠。
接著上邊的圖來繼續(xù)說多圖片上傳
不管是多圖片還是什么文件上傳腾么，其原理就是把所有的file文件作為一個(gè)集合，可以說是一個(gè)數(shù)組寻咒，集體傳給后臺(tái)哮翘，后臺(tái)拿到集合颈嚼，再解析出來每一項(xiàng)毛秘，得到想要的值。
按照這個(gè)思路阻课，其實(shí)第一種方案叫挟，就是直接在form表單里傳值是最簡(jiǎn)單的方法。把每一個(gè)input type=file的文件的name值都寫成一樣的限煞，比如：
<input type=file name='pic'/>? //這個(gè)比如是一個(gè)單張的圖片
<input type=file name='pic'/ multiple>//multiple是允許多個(gè)圖片的file內(nèi)置的屬性 這個(gè)比如是一組圖片
<input type=file name='pic'/> //比如這個(gè)是一個(gè)壓縮包
現(xiàn)在就有了三種類型的文件抹恳，比如到最后form表單共傳了4個(gè)文件，后臺(tái)接收到四個(gè)文件署驻，只需要分別解析出來即可
單文件多文件區(qū)別就在于奋献，單文件是upload.single? 多文件是upload.array 意思是接收到一個(gè)數(shù)組，第二個(gè)參數(shù)是文件數(shù)量的限制旺上。
再說一下使用formData傳遞參數(shù)
和上個(gè)方法一樣的場(chǎng)景瓶蚂，上傳四個(gè)文件，下圖是多個(gè)圖片上傳的一個(gè)組件
我現(xiàn)在要傳遞一個(gè)單獨(dú)的一個(gè)圖片文件宣吱，一個(gè)單獨(dú)的壓縮包文件窃这，一個(gè)多圖的組合文件≌骱颍可以想到formData的一個(gè)append方法杭攻，把各個(gè)文件添加到實(shí)例化后的formdata中
再看看這張圖祟敛，data是表單中的鍵值對(duì)的參數(shù)，fd被append了三次兆解，多圖上傳那個(gè)又是一個(gè)兩張圖片的一個(gè)集合馆铁，現(xiàn)在就是有了四個(gè)文件在fd中。
現(xiàn)在要把二進(jìn)制文件和普通文件一同上傳痪宰，在axios的post中可以將參數(shù)放在params中叼架，作請(qǐng)求頭的參數(shù)，后臺(tái)使用query接收參數(shù)衣撬，而文件和上圖一樣接收乖订。
