vue文件上傳報(bào)錯(cuò)如何解決

本篇內(nèi)容主要講解“vue文件上傳報(bào)錯(cuò)如何解決”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“vue文件上傳報(bào)錯(cuò)如何解決”吧!

vue文件上傳報(bào)錯(cuò)的解決辦法：1、通過“vue init webpack demo”創(chuàng)建一個(gè)vue工程；2、添加一個(gè)上傳文件的元素；3、在method中加入了“upload(data)”方法；4、使用FromData把需要的參數(shù)添加進(jìn)去，用axios提交請(qǐng)求即可。

Vue 上傳文件失敗的解決方案

在一個(gè)項(xiàng)目中開發(fā)前端的同事使用Vue開發(fā)了一個(gè)上傳文件的模塊，但是無論如何就是無法提交這種POST請(qǐng)求給后臺(tái)服務(wù)，
具體的現(xiàn)象就是，前端界面上傳文件時(shí)，
Content-Type總是application/x-www-form-urlencoded，然后SpringBoot的后臺(tái)服務(wù)就報(bào)錯(cuò)：Current is not a multipart request.表示這個(gè)請(qǐng)求錯(cuò)誤。

其實(shí)post上傳文件時(shí)應(yīng)該是Content-Type: multipart/form-data，但是前端在內(nèi)網(wǎng)里面，并且是經(jīng)過封裝的。經(jīng)過分析和測(cè)試，普通的html上傳個(gè)文件都沒有問題，問題肯定出在VUE提交請(qǐng)求的環(huán)節(jié)上面。因?yàn)檎嬲拈_發(fā)環(huán)境處于公司內(nèi)網(wǎng)環(huán)境，并且與外界隔絕，因此決定在我的電腦里模擬出這個(gè)場(chǎng)景方便解決問題。

為了實(shí)現(xiàn)這個(gè)模擬的環(huán)境，需要安裝一個(gè)Vue開發(fā)環(huán)境，和一個(gè)Python 開發(fā)環(huán)境，這兩種開發(fā)的安裝方法不是文章的重點(diǎn)，因此略過。

總體的思路：

用Vue開發(fā)一個(gè)簡(jiǎn)單的前端界面實(shí)現(xiàn)文件上傳功能，然后用Python開發(fā)一個(gè)Web 后端服務(wù)。

第1步：用Vue創(chuàng)建一個(gè)WEB頁(yè)面

創(chuàng)建一個(gè)vue工程：

vue init webpack demo

要用axios提交請(qǐng)求，不用安裝也可以，使用<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 直接引入即可

用VSCode打開剛創(chuàng)建的vue工程

添加一個(gè)上傳文件的元素：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <input type="file" id="fileExport" @change="upload" ref="inputer">
  </div>
  
</template>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>

import axios from 'axios'
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

重點(diǎn)

<input type="file" id="fileExport" @change="upload" ref="inputer">

然后加入控制腳本：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <input type="file" id="fileExport" @change="upload" ref="inputer">
  </div>
  
</template>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
import axios from 'axios'
export default {
  name: 'App',
    methods:{
    upload(data){
          console.log('--->',data)         
          var formData = new FormData();
          formData.append('side', 'front');
          formData.append('file',data.target.files[0]);
          
          let config = {
             headers: {
               'Content-Type': 'multipart/form-data'             
             }
          };
          axios.post('http://127.0.0.1:5050/icard/check',formData,config)
            .then((response) => {
                console.log("OK");
          })
        }  
  }
}

在method中加入了upload(data)方法
使用FromData把需要的參數(shù)添加進(jìn)去，用axios提交請(qǐng)求即可。

第2步：用Python 開發(fā)一個(gè)簡(jiǎn)單的Web 服務(wù)

from flask import Flask, request
from flask_cors import CORS

app = Flask(__name__)

#跨域處理
cors = CORS(app, supports_credentials=True)

@app.route('/icard/check',methods=['POST'])
def deal_request1():
    print('收到post請(qǐng)求')
    side = request.form["side"]
    image = request.files.get('file')   
      
    print("side= %s"% (side))
    print("filename= %s"% (image.filename))

    return "OK"

if __name__ == '__main__':   
    app.run(host="127.0.0.1", port=5050)

Python 的 Flask簡(jiǎn)直太犀利了，創(chuàng)建一個(gè)簡(jiǎn)單的WEB服務(wù)如此的簡(jiǎn)單。
其基本思路就是在本地的5050端口創(chuàng)建一個(gè)服務(wù)，當(dāng)有HTTP請(qǐng)求http://127.0.0.1:5050/idcard/check這個(gè)URL時(shí)，接收參數(shù)并且打印輸出收到的參數(shù)。

在jupyter里面啟動(dòng)后如下：

啟動(dòng)后提示：Running on http://127.0.0.1:5050/ (Press CTRL+C to quit)

OK，簡(jiǎn)單的WEB服務(wù)就啟動(dòng)好了，接下來啟動(dòng)vue,

在VSCodel里面打開命令行終端，輸入npm run dev 啟動(dòng)，

然后在瀏覽器打開 http://www.kemok4.com/link/5ba026c424f718a4808f9d3f75856dab

因?yàn)槭莢ue的初始工程所以打開后這樣，重點(diǎn)是最后一行可以選擇文件，此時(shí)先打開瀏覽器的調(diào)試工具，然后選擇一個(gè)文件，看看瀏覽器調(diào)試工具里的信息，重頭戲來了

因?yàn)樵趘ue代碼中加了一個(gè)日志輸出：console.log('--->',data)    
因此可以在瀏覽器看到日志信息

重要的地方花了紅線，可以看到這里輸出的 event里面的數(shù)據(jù)，

根據(jù)event.target.file[0]可以得到需要上傳的文件對(duì)象，再看看Network里面的情況：

在Request Header里面有兩行重要的信息：

Content-Length: 69392
  Content-Type: multipart/form-data; boundary=----WebKitFormBoundarycgFDx4PDNjkXoSnZ

第一行表示上傳的文件大小字節(jié)數(shù)，
Content-Type代表發(fā)送端發(fā)送的實(shí)體數(shù)據(jù)的數(shù)據(jù)類型，如果向服務(wù)器端發(fā)送的是普通的字符串，默認(rèn)設(shè)置為：text/html;
post請(qǐng)求肯定要發(fā)送數(shù)據(jù)包;
因此對(duì)數(shù)據(jù)包的Type有專門的限定:
Content-Type只能是
application/x-www-form-urlencoded,
application/json
multipart/form-data
或 text/plain中的一種。
其他的均不常見。

在看看服務(wù)端的情況：

Web 服務(wù)端立即輸出了相關(guān)信息，說明已經(jīng)得到了上傳文件的數(shù)據(jù)，這里為了做測(cè)試僅僅輸出了文件名和另一個(gè)參數(shù)。
在我的電腦上測(cè)試上傳文件，接收文件都OK。
然后同事根據(jù)我的代碼修改了內(nèi)網(wǎng)VUE工程的代碼，問題來了，在內(nèi)網(wǎng)里上傳文件時(shí)也用console.log(data)輸出了event,但是格式和這里不同哦，這是很大的疑惑或許是環(huán)境問題吧，
在我的測(cè)試工程中用event.target.file[0]可以得到需要上傳的文件對(duì)象，但是在內(nèi)網(wǎng)環(huán)境下event里面根本木有target這個(gè)節(jié)點(diǎn)，根據(jù)最后需要的是file節(jié)點(diǎn)的特征，在raw節(jié)點(diǎn)下找到了file節(jié)點(diǎn)，然后代碼修改為
 

upload(data){
          console.log('--->',data)         
          var formData = new FormData();
          formData.append('side', 'front');
          formData.append('file',data.raw.files[0]);
          
          let config = {
            // headers: {
            //   'Content-Type': 'multipart/form-data'             
            // }
          };
          axios.post('http://127.0.0.1:5050/icard/check',formData,config)
            .then((response) => {
                console.log("OK");
          })
        }

內(nèi)網(wǎng)環(huán)境下上傳文件成功了。并且測(cè)試發(fā)現(xiàn)，只要這里正確得到了文件對(duì)象參數(shù)，那么可以不用顯式指定Content-Type，這里也會(huì)自動(dòng)把Content-Type設(shè)置為multipart/form-data，我不了解Vue底層是如何處理的，可能是發(fā)現(xiàn)提交的數(shù)據(jù)是流，因此把這里的類型自動(dòng)設(shè)置成了multipart/form-data。

到此，相信大家對(duì)“vue文件上傳報(bào)錯(cuò)如何解決”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！