SpringBoot+Vue表單檔案上傳

版權聲明：本文首發 http://asing1elife.com ，轉載請注明出處。 https://blog.csdn.net/asing1elife/article/details/82811812

Spring Boot + Vue 的檔案上傳本身沒有什麼難點，但如果涉及到是一個表單對象中存在檔案，則會比較繁瑣

更多精彩

• 更多技術部落格，請移步 asing1elife’s blog

後端實體類

1. Spring Boot中對于檔案的接收類型和Spring MVC保持一緻，使用MultipartFile
2. 與Spring MVC不同的是Spring Boot進行檔案上傳操作不需要添加配置資訊，Spring Boot自身已經預設開啟了檔案上傳功能

...

public class Work {
  ...

    @Transient
    private MultipartFile referenceFile;

  ...
}
                

後端接收請求的接口

1. SpringBoot與Vue進行內建，使用axios進行異步請求發送，對于接收對象類型的資料一般使用**@RequestBody**的注解将對象解析為JSON格式
2. 但是MultipartFile類型的檔案無法轉換為JSON格式，是以此處需要使用**@ModelAttribute**的注解接收對象資訊

...

@RestController
@RequestMapping("/${contextPath}/works")
public class WorkController extends SimpleController<Work, WorkService> {
  ...

    @ApiOperation("儲存作業")
    @PostMapping("")
    public ResponseData saveRule(@ModelAttribute Work work) {
  return workService.save(work);
    }

  ...
}
                

前端對檔案資料的處理

1. 使用預設的檔案輸入框進行檔案上傳會影響美觀，是以通常将輸入框隐藏後通過點選按鈕進行調用
2. 由于檔案格式的input屬性是隻讀的，是以無法使用v-model對其資料的更改進行實時擷取
3. 是以需要通過**@change**對其資料的更改進行監聽，并指派給表單的對應屬性

<template>
  <in-form ref="inForm" :form="work" :rules="rules" :is-file="true">
    ...

    <el-button type="success" v-else @click="uploadReferenceFile">
    上傳答案 <span v-text="work.reference"></span>
    <input type="file" class="upload-file" ref="referenceFile" @change="setReferenceFile">
    </el-button>

    ...
  </in-form>
</template>

<script type="text/ecmascript-6">
...

  export default {
    ...

    methods: {
...

      // 上傳參考答案
      uploadReferenceFile () {
        this.$refs.referenceFile.click()
      },
      // 設定參考答案
      setReferenceFile (item) {
        let currentFile = item.target.files[0]

        this.work.reference = currentFile.name
        this.work.referenceFile = currentFile
      }

...
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .upload-file
    display none
</style>
                

前端發起請求的方式

1. 檔案格式的資料無法通過JSON格式進行傳遞，是以需要使用FormData對表單資料進行轉換
2. 但FormData隻能接受String和File格式的資料，對應Object格式的資料無法處理
3. 如果涉及到Object格式的資料則需要前後端配合進行資料轉換
4. 通常情況下對象中關聯的對象隻涉及到其中的某一個值，是以前端在處理時可以單獨将該值進行傳遞
5. 後端在接收到該值後，可以在其Setter方法中将資料賦予對應的對象即可

export function save ({url, data}, isFile) {
  // 帶檔案的上傳功能
  if (isFile) {
    let formData = new FormData()
    
    // 周遊傳入的資料
    for (let key in data) {
      // 擷取目前值
      let currentData = data[key]
  
      // 對于空值進行過濾
      if (currentData === '') {
        continue
      }
      
      // 将對象中的鍵值對傳入formData中
      formData.append(key, currentData)
    }
    
    data = formData
  }
  
  return fetch({
    url: url,
    method: config.POST,
    data
  })
}
                

限制檔案大小

1. 隻需要在::application.properties::中添加如下配置即可

spring.http.multipart.max-file-size=10MB
spring.http.multipart.max-request-size=10MB