Vue之使用elementUI的upload上傳組件導入csv文件

最近干活的時候有個需求，需要將csv文件導入到mysql數據庫中，前后端框架用的springboot+Vue，組件用的elementUI，下面將分步驟記錄實現過程。

1.導入按鈕部分：

<el-button class="filter-item" style="margin-left: 10px;" type="primary" @click="openCsvDialog()" icon="el-icon-plus">
    導入
</el-button>

2.按鈕點擊事件，這里是打開了一個Dialog

openCsvDialog() {
    this.file = {};
    this.csvVisible = true;
    this.csvTitle = '導入CSV文件';
    this.$refs.upload.clearFiles();
}

3.Dialog部分：

<el-dialog
    :title="csvTitle"
    :visible.sync="csvVisible"
    width="50%">
    <div>
        <el-form ref="file" label-width="120px">
        <el-form-item label="CSV文件導入：">
            <el-upload
                class="upload-demo"
                ref="upload"
                drag
                accept=".csv"
                action=""
                :multiple="false"
                :limit="1"
                :auto-upload="false"
                :on-change="handleChange">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">將文件拖到此處，或<em>點擊上傳</em></div>
                <div class="el-upload__tip" slot="tip">只能上傳csv文件</div>
            </el-upload>
        </el-form-item>
        </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="csvVisible = false">取消</el-button>
    <el-button type="primary" @click="importCsv">導入</el-button>
    </span>
</el-dialog>

說一說Dialog中的各個屬性，其中：

class指定了上傳的樣式；

ref的話指一個引用，例如你到時候可以用this.$refs.upload.submit()來進行手動上傳

drag表示是否可以進行文件拖拽

accept表示可以接收的上傳文件的類型

action表示你上傳文件的地址，這里我不做上傳文件的保存，讀取到文件流后直接入庫，所以我給的空串

:multiple="false"表示不支持多選文件，如果是true的話，表示支持多選文件

:limit="1"表示最大允許上傳個數，這里的話是表示最多上傳一個，多上傳覆蓋

:auto-upload="false"表示不支持選擇完文件后自動上傳，這里要注意的是，當這個屬性值為false的時候，你上傳前的鈎子函數before-upload是不好使的，但是可以用this.$refs.upload.submit()來進行手動上傳。

:on-change="handleChange"表示文件狀態改變時的鈎子，添加文件、上傳成功和上傳失敗時都會被調用，這個鈎子很重要，他可以接收兩個參數，一個是選擇的單個文件，另一個是多選的文件列表，我就是用這個鈎子來獲取上傳文件和手動上傳的。

 

4.handleChange方法：

// 上傳文件，獲取文件流
handleChange(file) {
    this.$refs.upload.clearFiles();
    //每次上傳前都清空
    this.file = {};
    //賦值
    this.file.file = file.raw;
},

5.點擊事件importCsv方法：

async importCsv() {
        if(Object.keys(this.file).length != 0){
          const res = await this.$store.api.newReq('/xxx/xxxxxx/importcsv').upload(this.file);
          if (res.code === 0) {
            this.csvVisible = false;
            //這里是導入完文件后，重新查詢數據庫刷新頁面
            this.getList();
            this.$message({
              type: 'success',
              message: '導入成功',
              duration: 1500,
              onClose: async () => {
              }
            })
          }
        }else{
          this.$message.error('上傳文件不能為空');
        }
}

以上就是elementUI組件用upload來手動導入csv文件的Vue側的寫法，然后在后台就可以拿到文件，讀取文件流存入數據庫啦！讀取csv文件流入庫我用的是openCsv來做的，在我的下一篇博客中您也可以找到。

轉載於：https://www.cnblogs.com/ailanlan/p/12143685.html

還沒試過不知道有沒效果。