Vue通過原始文件選擇框實現文件上傳（支持批量）

頁面效果圖：

代碼模板：

<v-block>
  <input
    type="file"
    name="file"
    class="el-upload__input"
    @change="selectFileEvent(fileNameList)"
    multiple
    ref="file2"
  />
  <el-form>
    <el-form-item label="選擇文件">
      <el-input
        type="text"
        v-model="fileNameList"
        style="width: 50%"
        disabled
      ></el-input>
      <el-button @click="fileSelect">...</el-button>
    </el-form-item>
  </el-form>
</v-block>

一、給選擇文件按鈕綁定單擊事件——去觸發type="file"的input標簽

// 加號選擇文件
fileSelect(index) {
   this.$refs.file2.click(index);
}

二、給文件選擇標簽綁定change事件

// 加號選定文件
selectFileEvent(fileNameList) {
  // 清空文件名列表和文件
  var fileNameList = "";
  let formDate = this.$refs.file2.files;
  for (let i = 0; i < formDate.length; i++) {
    if (formDate[i].name != null || formDate[i].name != "") {
      if (formDate[i].name.length > 20) {
        let name = formDate[i].name.split(".");
        // console.log(name,'name')
        fileNameList =
          fileNameList +
          `${name[0].substr(0, 16)}... .${name[name.length - 1]}` +
          ";";
      } else {
        fileNameList = fileNameList + formDate[i].name + ";";
      }
    }
  }
  this.fileNameList = fileNameList;
  this.fileList = formDate;
},

三、支持批量屬性

multiple

四、后端接口定義

public ResponseEntity<?> fileUpload(@RequestPart(required = false, value = "files") MultipartFile[] files) {
    return ResponseEntity.ok(true);
}