이번에는 el-upload로 엑셀 파일을 업로드하는 방법과, el-upload로 엑셀 파일을 업로드할 때의 주의사항에 대해 알려드리겠습니다. 아래는 실제 사례입니다.
el-upload가 Excel 파일을 업로드하는 방법
elemetUi 구성 요소--el-upload는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!