집 > 기사 > 웹 프론트엔드 > vue에서 element-ui의 Upload 업로드 구성 요소를 사용하는 방법

vue에서 element-ui의 Upload 업로드 구성 요소를 사용하는 방법

亚连원래의: 2018-06-07 10:50:284076검색

이 글에서는 vue 프로젝트에서 element-ui의 Upload 업로드 컴포넌트를 사용하는 예시를 주로 소개하고 있으니 참고용으로 올려보겠습니다.

이 글에서는 vue 프로젝트에서 element-ui의 Upload 업로드 컴포넌트를 사용하는 예를 소개합니다. 자세한 내용은 다음과 같습니다.

<el-upload
        v-else
        class=&#39;ensure ensureButt&#39;
        :action="importFileUrl"
        :data="upLoadData"
        name="importfile"
        :onError="uploadError"
        :onSuccess="uploadSuccess"
        :beforeUpload="beforeAvatarUpload"
        >
        <el-button size="small" type="primary">确定</el-button>

여기서 importFileUrl은 백그라운드 인터페이스이고, upLoadData는 파일 업로드 시 업로드할 추가 매개변수이며, uploadError는 업로드된 파일이 실패했을 때의 fallback 함수이고, uploadSuccess는 파일 업로드가 성공했을 때의 fallback 함수이고, beforeAvatarUpload는 파일을 업로드하기 전에 호출되는 함수라고 판단할 수 있습니다. 파일 형식은 여기에 있습니다.

data () {
  importFileUrl: &#39;http:dtc.com/cpy/add&#39;,
  upLoadData: {
    cpyId: &#39;123456&#39;, 
    occurTime: &#39;2017-08&#39;
  }
},
methods: {
  // 上传成功后的回调
  uploadSuccess (response, file, fileList) {
   console.log(&#39;上传文件&#39;, response)
  },
  // 上传错误
  uploadError (response, file, fileList) {
   console.log(&#39;上传失败，请重试！&#39;)
  },
  // 上传前对文件的大小的判断
  beforeAvatarUpload (file) {
   const extension = file.name.split(&#39;.&#39;)[1] === &#39;xls&#39;
   const extension2 = file.name.split(&#39;.&#39;)[1] === &#39;xlsx&#39;
   const extension3 = file.name.split(&#39;.&#39;)[1] === &#39;doc&#39;
   const extension4 = file.name.split(&#39;.&#39;)[1] === &#39;docx&#39;
   const isLt2M = file.size / 1024 / 1024 < 10
   if (!extension && !extension2 && !extension3 && !extension4) {
    console.log(&#39;上传模板只能是 xls、xlsx、doc、docx 格式!&#39;)
   }
   if (!isLt2M) {
    console.log(&#39;上传模板大小不能超过 10MB!&#39;)
   }
   return extension || extension2 || extension3 || extension4 && isLt2M
  }
}

최근에 VUE를 내 프로젝트의 프런트엔드 프레임워크로 사용하고 있습니다. 서버에 파일을 업로드해야 할 때 동료가 업로드 작업, 즉 업로드 주소를 동적으로 변경할 수 없다고 말했습니다. 그런 다음 살펴보고 동적으로 사용하려면 다음을 수행해야 한다는 것을 알았습니다.

action은 필수 매개변수이고 해당 유형은 문자열입니다. action과 그 뒤에 메소드 이름을 호출합니다. 방법을 선택하고 원하는 주소를 반환하세요. 코드 예:

//html 代码
<el-upload :action="UploadUrl()" :on-success="UploadSuccess" :file-list="fileList">
  <el-button size="small" type="primary" >点击上传</el-button>
  <p slot="tip" class="el-upload__tip"></p>
</el-upload>

// js 代码在 methods中写入需要调用的方法
methods:{
  UploadUrl:function(){
    return "返回需要上传的地址";   
  }  
}

위 내용을 정리했습니다. 앞으로 도움이 되길 바랍니다.

vue에서 element-ui의 Upload 업로드 구성 요소를 사용하는 방법

관련 기사