今回は、el-uploadでExcelファイルをアップロードする方法と、el-uploadでExcelファイルをアップロードする際の注意事項を紹介します。以下は実際的なケースです。
el-upload が Excel ファイルをアップロードする方法
elemetUi コンポーネント -- el-upload は Excel ファイルのアップロードの例を実装します
[要件] Excel ファイルのアップロードを実装するには、サーバーにアップロードするときに、アップロード ファイル インターフェイスを要求する前に、最初にファイル形式を決定する必要があります。
【知識ポイント】
1. el-upload の公式ドキュメントでは主に以下の属性が使用されています:
データ | オプションのパラメーター、アップロード時に追加のパラメーターが含まれます |
名前 | オプションのパラメータ、アップロードされたファイルのフィールド名 |
アップロード前 | オプションのパラメータ。ファイルをアップロードする前のフック。パラメータが false を返すか、Promise を返して拒否された場合、アップロードは停止します。 |
<template> <p class="panel admin-panel"> <p class="panel-head" id="add"><strong><span class="el-icon-edit"></span><span class="title">上传数据</span></strong></p> <p class="body-content"> <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="form uploadform"> <el-form-item label="部门" prop="name"> <el-select v-model="form.type" placeholder="请选择" style="width: 135px"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> <el-form-item> <el-upload class="upload-demo" ref="upload" action="http://10.1.20.218:8088/gnh-webadmin-platfrom/api/v1/sendSalaryBillGeinihua" :on-preview="handlePreview" :before-upload="beforeAvatarUpload" :on-remove="handleRemove" :file-list="fileList" :auto-upload = 'false' :on-success = 'handleSuccess' :data="form" name="salaryBill"> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> <p slot="tip" class="el-uploadtip">只能上传xls/xlsx文件</p> </el-upload> </el-form-item> </el-form> </p> </p> </template> <script> export default { data() { return { options: [{ value: '1', label: '帅哥部' }, { value: '2', label: '美女部' }], fileName:'', fileList:[], ruleForm: { // name: '', isShow: '0' }, form:{ type:'1' }, }; }, methods: { submitUpload() { this.$refs.upload.submit(); }, beforeAvatarUpload(file) { let Xls = file.name.split('.'); if(Xls[1] === 'xls'||Xls[1] === 'xlsx'){ return file }else { this.$message.error('上传文件只能是 xls/xlsx 格式!') return false } }, handleRemove(file, fileList) { }, handlePreview(file) { }, handleSuccess(res,file,fileList){ if(res.code===20000){ this.$message({ message: '上传成功!', type: 'success' }); }else { this.$message({ message: res.msg, type: 'error' }); } } } } </script> <style scope> input[type="file"] { display: none; } .el-upload-list{ width: 200px; } .el-select { width: 135px; } </style>
以上がel-uploadでExcelファイルをアップロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。