vue專案使用element元件上傳excel檔案
阿新 • • 發佈:2020-08-28
有寫需求一個一個的新增太慢了,所以需要以檔案形式大量資料匯入
html部分
<button @click="impoortExcel">匯入excel檔案</button> <!-- 匯入人員檔案 --> <!-- action 放的是匯入檔案的後臺地址 --> <el-dialog title="匯入人員檔案" :visible.sync="importDialogVisible" width="66%"> <el-upload ref="upload" name="file" :limit="limit" :auto-upload="false" action="介面地址" :on-exceed="handleExceed" :file-list="filelist" :on-change="handleChansge" > <el-button slot="trigger" size="small" type="primary">選取檔案</el-button> <el-button style="margin-left: 10px;" size="small" type="success" @click="postfile" :disabled="btn.disable" >{{btn.message}}</el-button> <div slot="tip" class="el-upload__tip">上傳檔案只能為excel檔案,且為xlsx,xls格式</div> </el-upload> //此處可以寫匯入時出現的詳細錯誤資訊,包含第幾行出現問題顯示出來 <div v-for="o in errmesg" :key="o.message" class="text item">{{ o.message }}</div> </el-dialog>
data部分
data() {
return {
importDialogVisible: false,
//檔案
file: "",
filename: "",
limit: 1,
filelist: [],
errmesg: [],
btn: {
disable: false,
message: "上傳伺服器",
},
}
}
彈窗方法
impoortExcel() { let that = this; that.importDialogVisible = true; },
選擇檔案方法
handleExceed(e) { // 判斷是否只能上傳一個檔案,超過提示報錯 console.log(e); this.$notify.error({ title: "錯誤", message: "只能上傳一個檔案哦", }); }, handleChansge(file, fileList) { console.log(file); let name = file.name; if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) { this.$notify.error({ title: "錯誤", message: "上傳檔案只能為excel檔案,且為xlsx,xls格式", }); this.filelist = []; this.file = ""; return false; } this.file = file.raw; this.filename = file.name; },
上傳檔案方法
postfile() {
let that = this;
if (this.file == "") {
that.$notify.error({
title: "錯誤",
message: "上傳檔案不能為空",
});
return false;
} else {
// 檔案形式的需要用 formData形式
let formData = new FormData();
formData.append("file", this.file);
let url = "介面地址";
let config = {
headers: { "Content-Type": "multipart/form-data" },
};
this.btn.disable = true;
this.btn.message = "上傳中,請等待";
this.$axios1
.post(url, formData, config)
.then(function (response) {
console.log(response);
that.$notify({
title: "成功",
message: response.data.message,
type: "success",
});
that.filelist = [];
that.btn.disable = false;
that.btn.message = "上傳伺服器";
})
.catch((err) => {
that.btn.disable = false;
that.btn.message = "上傳伺服器";
that.$notify.error({
title: "錯誤",
message: "上傳過程出錯啦",
});
});
}
},
效果展示
頁面展示
上傳成功之後 根據後臺返回資料自行處理