テクノロジースタック
- フロントエンドはVue3+Antdesignを使用
- バックエンドはSpringBootを使用します
使用するシーン
フロントエンドで複数のファイル (この例では txt ファイル) をアップロードすると、バックエンドがそれらを受け入れて txt の内容を読み取ります。
フロントエンドコード
すべてのコードを掲載しているわけではありませんので、完全なコードをご覧になりたい場合は、Antdesign が提供する公式のコードを参照してください。ここでの使用シナリオは、公式 Web サイトに掲載されているものとは少し異なります。キーコードのみ載せておきます。
ここでの使用シナリオは、ユーザーが複数のファイルをアップロードした後、[アップロード開始] ボタンをクリックしてファイルをバックエンドに転送するというものです。
UI コンポーネントのコードは次のとおりです。
<a-upload-dragger
:file-list="fileList"
:multiple="true"
:before-upload="beforeUpload"
@remove="handleRemove"
name="file"
>
<p class="ant-upload-drag-icon">
<inbox-outlined></inbox-outlined>
</p>
<p class="ant-upload-text">Click or drag file to this area to upload</p>
<p class="ant-upload-hint">
Support for a single or bulk upload. Strictly prohibit from uploading company data or other
band files
</p>
</a-upload-dragger>
<a-button
type="primary"
:disabled="fileList.length === 0"
:loading="uploading"
style="margin-top: 16px"
@click="handleUpload"
>
{
{ uploading ? 'Uploading' : 'Start Upload' }}
</a-button>フロントエンドでファイルをアップロードするための呼び出しメソッドは次のとおりです。
const handleRemove = file => {
const index = fileList.value.indexOf(file)
const newFileList = fileList.value.slice()
newFileList.splice(index, 1)
fileList.value = newFileList
}
const beforeUpload = file => {
fileList.value = [...fileList.value, file]
return false
}
const handleUpload = async () => {
const formData = new FormData()
fileList.value.forEach(file => {
// 注意这里append的名字“file”，需要跟后端接受的名字是一样的
formData.append('file', file)
})
uploading.value = true
// 这里的axios换成大家熟悉的写法就可以，主要是formData是放到body里面的
await APIService.post('/upload/xxx', formData).then((res) => {
console.log(res)
})
}バックエンドコード
そんなに複雑なことは書かず、厳密にコントローラーとサービスに分けて、ファイルの受信と読み込みの方法を皆さんに説明するのが目的です。誰もが自分の実際の状況に応じて調整できます。
なお、@RequestParam(value = " file ") のファイルはフロントエンドの追記と一致している必要があるため、ファイルの整合性が取れていなければなりません。
@PostMapping("upload")
@ResponseStatus(HttpStatus.OK)
@ResponseBody
public void upload(@RequestParam(value = "file") MultipartFile[] files) throws IOException {
for (MultipartFile file : files) {
BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(file.getInputStream()));
String lineTxt;
while ((lineTxt=bufferedReader.readLine())!=null){
System.out.println(lineTxt);
}
}
}