文字列だけでなくファイルも含む大量のデータを含むフォームをバックグラウンドに送信する必要があり、バックグラウンドでドキュメント ストリームを直接渡す必要がある場合、FormData が不可欠になる可能性があります。
まず私のフォームはこんな感じです。
アップロード コンポーネントは、element-ui の el-upload コンポーネントを使用します。このコンポーネントは、組み込みの手動アップロードおよび自動アップロード メソッドを提供します。このプロジェクトにはファイル ライブラリがないため、http-request 経由でのみ手動でアップロードできます。終了、スローここでアップロード方法を指定し、ユーザーがアップロードしたファイルを取得します。
// html部分
<el-form-item label="问题图片">
<el-upload ref="imageUpload" action="#" :disabled="!isAdd" list-type="picture-card" :http-request="uploadImage"
:before-upload="beforeImageUpload" :on-preview="handleImagePreview" :limit="6" :on-exceed="handleMsg">
<i class="el-icon-plus"></i>
<div slot="tip">最多上传6张图片，且不支持gif格式</div>
</el-upload>
<el-dialog :visible.sync="imageDialog" append-to-body>
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-form-item>アップロード方法は以下の通りです。
// 上传图片
uploadImage(param) {
let file = new Blob([param], { type: param.type })
this.customerForm.images.push(file)
},上記のコードでは、ファイル フィールド パラメーターを取得し、新しい Blob を使用してそれをドキュメント ストリームの形式に変換します。次の customerForm は定義したフォームの名前で、images は、に保存されている画像の配列です。アップロードされたファイルをドキュメント ストリームに変換し、それを画像配列にプッシュします。
最終的なアップロード方法は次のとおりです。
handleAdd() {
let data = {
...this.orderForm,
...this.customerForm,
}
let format = new FormData();
for (let property in data) {
if (property == 'images' || property == 'video') {
for (let i = 0; i < data[property].length; i++) {
format.append(property, data[property][i]);
}
} else {
format.append(property, data[property]);
}
}
submitOrder(format).then(res => {
this.$message({ type: 'success', message: '新增成功!' });
this.addVisible = false
})
},新しい FormData オブジェクトにデータを 1 つずつ追加してキーと値のペアを形成し、最後に組み立てられた FormData オブジェクトをバックグラウンドに渡すと、追加は成功しました。
FormData オブジェクトとは何ですか? 簡単に言うと、キーと値のペアを格納するモデルです。アップロードしたパラメータにドキュメントストリームが含まれている場合はシリアル化できないため、この時はFormDataを使用する必要があります。
let formdata = new FormData() //初始化FormData对象
formdata.append('name','potato') // append添加数据
console.log(formdata.getAll('name')); // 获取key为name的所有值，是一个数组
console.log(formdata.get('name')); // 获取key为name的第一个值
formdata.set('name','tomato') // set修改数据
formdata.delete('name') // delete删除数据
console.log(formdata.has('pwd')); // has(key) 如果存在返回true,否则返回false
FormData オブジェクトの使用法:
1. いくつかのキーと値のペアを使用して、一連のフォーム コントロールをシミュレートします。つまり、フォーム内のすべてのフォーム要素の名前と値をクエリ文字列に組み立てます。
2. バイナリ ファイルを非同期でアップロードします。
要約すると、ドキュメント フローを含むフォームをアップロードする手順は次のとおりです。
1. ファイルを Blob ドキュメント ストリーム形式に変換します。
2.すべてのフォームフィールドを formdata に追加し、ファイルをアップロードするときに formdata 形式で送信します。