Vue 프로젝트에서 업로드 구성 요소를 사용하는 방법

이번에는 Vue 프로젝트에서 upload 컴포넌트를 사용하는 방법을 보여드리겠습니다. Vue 프로젝트에서 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는 파일 업로드 실패 시 폴백 함수, uploadSuccess는 파일 업로드 성공 시 폴백 함수, beforeAvatarUpload는 함수입니다. 파일을 업로드하기 전에 호출하면 여기에서 파일 형식을 판단할 수 있습니다. rreee 최근 VUE를 내 프로젝트의 프런트엔드 프레임워크로 사용했는데, 서버에 파일을 업로드해야 할 때 동료가 업로드 작업, 즉 업로드 주소를 동적으로 변경할 수 없다고 말했습니다. 찾아보니 다음과 같은 처리가 필요하다는 것을 발견했습니다.

Action은 필수 매개변수이며 해당 유형은

string

입니다. action을 다음과 같이 작성하고, 그 뒤에 메서드 이름을 입력하고, 원하는 주소를 반환합니다. 코드 예:

data () {
  importFileUrl: 'http:dtc.com/cpy/add',
  upLoadData: {
    cpyId: '123456', 
    occurTime: '2017-08'
  }
},
methods: {
  // 上传成功后的回调
  uploadSuccess (response, file, fileList) {
   console.log('上传文件', response)
  },
  // 上传错误
  uploadError (response, file, fileList) {
   console.log('上传失败，请重试！')
  },
  // 上传前对文件的大小的判断
  beforeAvatarUpload (file) {
   const extension = file.name.split('.')[1] === 'xls'
   const extension2 = file.name.split('.')[1] === 'xlsx'
   const extension3 = file.name.split('.')[1] === 'doc'
   const extension4 = file.name.split('.')[1] === 'docx'
   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
  }
}

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

이 기사의 사례 당신은 방법을 마스터했습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

맞춤형 Ajax 도메인 간 구성 요소 캡슐화

express+multer 노드 이미지 업로드 구현을 위한 특정 단계

위 내용은 Vue 프로젝트에서 업로드 구성 요소를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!