|
上一篇說了一下后端使用easyexcel處理excel然后進(jìn)行入庫的，這一篇我們就使用vue調(diào)用后端的接口吧！這里組件的話使用element的上傳組件,下面有兩種，我就用手動上傳這種方式：
最后的畫面如圖所示：
1.templage代碼： <template>
<div class='app-container'>
<el-form label-width="120px">
<el-form-item label="信息描述">
<el-tag type="info">excel模版說明:課程分類模板，用戶必須按照這個(gè)模板進(jìn)行填寫</el-tag>
<br>
<el-tag>
<i class="el-icon-download" />
<!-- 這里的話可以把這個(gè)模板放到阿里的OSS中 -->
<a :href="downloadUrl">點(diǎn)擊下載模版</a>
</el-tag>
</el-form-item>
<el-form-item label="選擇Excel">
<el-upload ref="upload"
:auto-upload="false"
:on-success="fileUploadSuccess"
:on-error="fileUploadError"
:disabled="importBtnDisabled"
:limit="1"
:action="formSubmitFileUrl"
name="file"
accept="application/vnd.ms-excel">
<el-button slot="trigger"
size="small"
type="primary">選擇上傳文件</el-button>
<el-button :loading="loading"
style="margin-left: 10px;"
size="small"
type="success"
@click="submitUpload">上傳到服務(wù)器</el-button>
</el-upload>
</el-form-item>
</el-form>
</div>
</template>
2.script代碼： export default { data () { // 這里存放數(shù)據(jù) return { importBtnDisabled: false, // 按鈕是否禁用, loading: false, downloadUrl: "/static/test.xlsx",//excel模板文件，可以放到OSS中，也可以就放到vue項(xiàng)目中的static目錄中，提供給用戶下載 formSubmitFileUrl: process.env.BASE_API + "/edu/subject/addSubject"//調(diào)用后端解析excel的接口 } }, methods: { //上傳到服務(wù)器,這里是vue中提交表單的寫法this.$refs.upload.submit() submitUpload () { this.importBtnDisabled = true this.loading = true this.$refs.upload.submit() }, //上傳成功 fileUploadSuccess () { this.loading = false this.$message({ type: 'success', message: '添加課程分類成功' }) //導(dǎo)入成功之后跳轉(zhuǎn)到課程列表界面 // this.$router.push({ path: '/edu/subject/list' }) }, //上傳失敗 fileUploadError () { this.loading = false this.$message({ type: 'error', message: '導(dǎo)入文件失敗' }) } } }
|
|
|
