あるプロジェクトでフロントエンドを開発した同僚が、 Vue はファイルをアップロードするためのモジュールを開発しますが、とにかくこの POST リクエストをバックグラウンド サービスに送信できません。
実際、投稿がファイルをアップロードするときは、Content-Type: multipart/form-data である必要がありますが、フロントエンドはイントラネット内にあり、カプセル化されています。分析とテストの後、通常の HTML を使用してファイルをアップロードすることに問題はありませんが、問題は VUE の送信リクエスト プロセスにあると考えられます。実際の開発環境は会社のイントラネット環境にあり、外部の世界から隔離されているため、問題解決を容易にするために、このシナリオを自分のコンピューター上でシミュレートすることにしました。
このシミュレート環境を実現するには、Vue 開発環境と Python 開発環境をインストールする必要がありますが、これら 2 つの開発インストール方法はこの記事の焦点ではないため、省略します。
一般的なアイデア:
Vue を使用してシンプルなフロントエンド インターフェイスを開発してファイル アップロード機能を実装し、次に Python を使用して Web バックエンド サービスを開発します。
ステップ 1: Vue を使用して WEB ページを作成する
vue プロジェクトを作成します:
vue init webpack demo ログイン後にコピー
axios を使用してリクエストを送信するには、axios をインストールする必要はありません。 直接インポートするだけです
VSCode を使用して、新しく作成した Vue プロジェクトを開きます
ファイルをアップロードする要素を追加します:
<template>
<div>
<img alt="vueファイルのアップロードエラーが発生した場合の対処方法" >
<router-view></router-view>
<input>
</div>
</template>
<script></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> ログイン後にコピー
重要なポイント
次に、制御スクリプトを追加します。
<template>
<div>
<img alt="vueファイルのアップロードエラーが発生した場合の対処方法" >
<router-view></router-view>
<input>
</div>
</template>
<script></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");
})
}
}
}</script> ログイン後にコピー
upload(data) メソッドをメソッドに追加します
ステップ 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 サービスを非常に簡単に作成できます。
jupyter で起動すると、次のようになります:
起動後、プロンプト: http://127.0.0.1:5050/ で実行されます。 (CTRL C を押して終了します)
OK、単純な WEB サービスが開始され、vue が開始されます。
VSCodel でコマンド ライン ターミナルを開き、「npm run dev」と入力して開始します。
次にブラウザで開きます https://www.php.cn/link/5ba026c424f718a4808f9d3f75856dab
vue の初期プロジェクトなので、開いた後、ここが重要なポイントです ファイルを選択する最後の行です このとき、最初にブラウザ デバッグ ツールを開き、次にファイルを選択し、ブラウザ デバッグ ツールの情報を確認します。 ハイライトはこれからです
vue コードにログが追加されるため 出力: console.log('--->',data)
重要な場所は赤線でマークされています。ここでイベント出力のデータについては、
event.target に従ってアップロードする必要があるファイル オブジェクトを取得できます。 file[0] を開き、ネットワーク内の状況を確認します:
リクエスト ヘッダーには 2 行の重要な情報があります:
Content-Length: 69392
第一行表示上传的文件大小字节数，
在看看服务端的情况：
Web 服务端立即输出了相关信息，说明已经得到了上传文件的数据，这里为了做测试仅仅输出了文件名和另一个参数。
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视频教程 》
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
