el-upload를 사용하여 Excel 파일을 업로드하는 방법

이번에는 el-upload로 엑셀 파일을 업로드하는 방법과, el-upload로 엑셀 파일을 업로드할 때의 주의사항에 대해 알려드리겠습니다. 아래는 실제 사례입니다.

el-upload가 Excel 파일을 업로드하는 방법

elemetUi 구성 요소--el-upload는 Excel 파일 업로드의 예를 구현합니다

[요구사항] 엑셀 파일 업로드를 구현하기 위해서는 서버 업로드 시 파일 업로드 인터페이스를 요청하기 전에 파일 형식을 먼저 결정해야 합니다.

【지식 포인트】

 1. el-upload 공식 문서에서는 다음 속성이 주로 사용됩니다:

데이터	선택 매개변수, 업로드 시 추가 매개변수 포함
이름	선택적 매개변수, 업로드된 파일 필드 이름
업로드 전	선택적 매개변수, 파일 업로드 전 후크입니다. 매개변수는 업로드된 파일입니다. false를 반환하거나 Promise를 반환하고 거부되면 업로드가 중지됩니다.

 2. 문자열을 가로채기 위해 분할

[분석]

<template>
  <p>
    </p>
<p><strong><span></span><span>上传数据</span></strong></p>
    <p>
      <el-form>
        <el-form-item>
          <el-select>
            <el-option>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-upload>
            <el-button>选取文件</el-button>
            <el-button>上传到服务器</el-button>
            <p>只能上传xls/xlsx文件</p>
          </el-upload>
        </el-form-item>
      </el-form>
    </p>
  
</template>
<script>
  export default {
    data() {
      return {
        options: [{
          value: &#39;1&#39;,
          label: &#39;帅哥部&#39;
        }, {
          value: &#39;2&#39;,
          label: &#39;美女部&#39;
        }],
        fileName:&#39;&#39;,
        fileList:[],
        ruleForm: {
//          name: &#39;&#39;,
          isShow: &#39;0&#39;
        },
        form:{
          type:&#39;1&#39;
        },
      };
    },
    methods: {
      submitUpload() {
        this.$refs.upload.submit();
      },
      beforeAvatarUpload(file) {
        let Xls = file.name.split(&#39;.&#39;);
        if(Xls[1] === &#39;xls&#39;||Xls[1] === &#39;xlsx&#39;){
          return file
        }else {
          this.$message.error(&#39;上传文件只能是 xls/xlsx 格式!&#39;)
          return false
        }
      },
      handleRemove(file, fileList) {
      },
      handlePreview(file) {
      },
      handleSuccess(res,file,fileList){
        if(res.code===20000){
          this.$message({
            message: &#39;上传成功！&#39;,
            type: &#39;success&#39;
          });
        }else {
          this.$message({
            message: res.msg,
            type: &#39;error&#39;
          });
        }
      }
    }
  }
</script>
<style>
  input[type="file"] {
    display: none;
  }
  .el-upload-list{
    width: 200px;
  }
  .el-select {
    width: 135px;
  }
</style>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

위 내용은 el-upload를 사용하여 Excel 파일을 업로드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!