vue文件上傳報錯如何解決

本篇內容主要講解“vue文件上傳報錯如何解決”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue文件上傳報錯如何解決”吧!

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

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

在一個項目中開發前端的同事使用Vue開發了一個上傳文件的模塊，但是無論如何就是無法提交這種POST請求給后臺服務，
具體的現象就是，前端界面上傳文件時，
Content-Type總是application/x-www-form-urlencoded，然后SpringBoot的后臺服務就報錯：Current is not a multipart request.表示這個請求錯誤。

其實post上傳文件時應該是Content-Type: multipart/form-data，但是前端在內網里面，并且是經過封裝的。經過分析和測試，普通的html上傳個文件都沒有問題，問題肯定出在VUE提交請求的環節上面。因為真正的開發環境處于公司內網環境，并且與外界隔絕，因此決定在我的電腦里模擬出這個場景方便解決問題。

為了實現這個模擬的環境，需要安裝一個Vue開發環境，和一個Python 開發環境，這兩種開發的安裝方法不是文章的重點，因此略過。

總體的思路：

用Vue開發一個簡單的前端界面實現文件上傳功能，然后用Python開發一個Web 后端服務。

第1步：用Vue創建一個WEB頁面

創建一個vue工程：

vue init webpack demo

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

用VSCode打開剛創建的vue工程

添加一個上傳文件的元素：

<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>

重點

<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把需要的參數添加進去，用axios提交請求即可。

第2步：用Python 開發一個簡單的Web 服務

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請求')
    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簡直太犀利了，創建一個簡單的WEB服務如此的簡單。
其基本思路就是在本地的5050端口創建一個服務，當有HTTP請求http://127.0.0.1:5050/idcard/check這個URL時，接收參數并且打印輸出收到的參數。

在jupyter里面啟動后如下：

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

OK，簡單的WEB服務就啟動好了，接下來啟動vue,

在VSCodel里面打開命令行終端，輸入npm run dev 啟動，

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

因為是vue的初始工程所以打開后這樣，重點是最后一行可以選擇文件，此時先打開瀏覽器的調試工具，然后選擇一個文件，看看瀏覽器調試工具里的信息，重頭戲來了

因為在vue代碼中加了一個日志輸出：console.log('--->',data)    
因此可以在瀏覽器看到日志信息

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

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

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

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

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

在看看服務端的情況：

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

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");
          })
        }

內網環境下上傳文件成功了。并且測試發現，只要這里正確得到了文件對象參數，那么可以不用顯式指定Content-Type，這里也會自動把Content-Type設置為multipart/form-data，我不了解Vue底層是如何處理的，可能是發現提交的數據是流，因此把這里的類型自動設置成了multipart/form-data。

到此，相信大家對“vue文件上傳報錯如何解決”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！