如何實現從本地的文件夾導入文件并上傳？

clipboard.png

1. html部分，只實現瀏覽文件按鈕

<input
    type="file"
    ref="clearFile"
    style="display:none"
    @change="upload($event)"
    class="add-file-right-input"
    accept=".csv"
/>
<a-button @click="goFile" size="small" type="primary">
 <a-icon type="upload" />瀏覽文件
</a-button>

2. js部分

 methods:{
    /* ===== 按鈕點擊上傳文件觸發input文件 === */
    goFile() {
      this.$refs.clearFile.click();//上傳文件
    },
    /* =====input file上傳文件事件=== */
    upload(event) {
      let file = event.target.files;//target事件
      let size = file[0].size;//獲取文件大小
      size = size / (1024 * 1024);
      for (let i = 0; i < file.length; i++) {
        //    上傳類型判斷
        let imgName = file[i].name;
        let idx = imgName.lastIndexOf(".");
        if (idx != -1) {
          let ext = imgName.substr(idx + 1).toUpperCase();
          ext = ext.toLowerCase();
          if (ext != "csv") {
            return;
          } else {
            this.addArr.push(file[i]);
            this.uploadName = file[0].name;
          }
        }
      }
      // 上傳文件大小
      if (size > 5) {
        this.uploadName = "";
        this.$message.error("文件大小5MB!");
      }
      this.$refs.clearFile.value = ""; //上傳文件后重置
    },

    handleSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (0 == this.addArr.length) {
            this.$message.error("請選擇要上傳的文件");
            return;
          }
          // 通過FormData將文件轉換為二進制數據
          let formData = new window.FormData();
          //將文件轉換為二進制
          formData.append("type", this.form.type);
          formData.append("key_ver", this.form.key_ver);
          for (var i = 0; i < this.addArr.length; i++) {
            formData.append("file", this.addArr[i]);
          }
          let config = {
            headers: {
              type: "file"
            }//這個地方是表單上傳文件的請求頭
          };
          this.confirmLoading = true;
          this.$httpPost(
            "········",//請求接口
            formData,
            config
          )
            .then(({ code, desc }) => {
              this.confirmLoading = false;
              if (code === "0") {
                this.addArr = [];
                this.$message.success("操作成功!");
                this.$parent.getData();
                this.handleCancel(1);
              } else {
                this.$message.error(desc);
              }
            })
            .catch(() => {
              this.$message.success("操作失敗!");
              this.confirmLoading = false;
            });
        }
      });
    },
    }
  },

注：
1.target事件屬性可返回事件的目標節點（出發該實踐的節點），如生成事件的元素、文檔或者窗口。
2.file屬性

• name： 文件名，該屬性只讀
• size：文件大小，單位為字節，該屬性只讀
• type： 文件類型，該屬性只讀
• lastModified：文件的上次修改時間，格式為時間戳
• lastModifiedDate：文件上次我修改的時間，格式為Date對象實例

3.FormData創建對象（將本地數據上傳或者導入數據庫的時候需要使用到FormData對象），可以將所有的表單元素的name和value組成一個queryString提交到后臺.