zoukankan      html  css  js  c++  java
  • 关于el-upload上传

     <el-upload
                    class="edit-input-upload"
                    :action="config.baseUrl + '/joinus/candidate/updateFile'"
                    :limit="1"
                    :before-upload="beforeAvatarUpload"
                    :on-success="fileNumber"
                    accept=".doc,.dot,.DOC,.DOT.pdf,.PDF"
                    :file-list="fileList"
                    ref="uploadResuMe"
                  >
           <div class="upload-box">{{$t('joinUs.browse')}}</div>
    </el-upload>


    //错误提示
    <div class="upload-error">
      <p v-show="uploadErrorFileSize">× {{$t('joinUs.uploadError1')}}</p>
      <p v-show="uploadErrorFileType">× {{$t('joinUs.uploadError2')}}</p>
    </div>

    methods:

      //限制上传格式和大小
      beforeAvatarUpload (file) {
    const isDOC = file.type === 'application/msword'; const isPDF = file.type === 'application/pdf'; const isLt5M = file.size / 1024 / 1024 < 5; if (!isDOC && !isPDF) { this.uploadErrorFileSize = true } else { this.uploadErrorFileSize = false } if (!isLt5M) { this.uploadErrorFileType = true } else { this.uploadErrorFileType = false } return (isDOC || isPDF) && isLt5M; },

       //成功后获取文件名 和 文件路径 fileNumber (response, file, fileList, result) {
    this.fileListNum = fileList.length this.ruleForm.fileUrl = response.data.filePath this.ruleForm.originName = response.data.fileName },
    //清空已上传的文件 clearUpload () {
    this.$refs.uploadResuMe.clearFiles() },
  • 相关阅读:
    Java 类和对象12
    Java类和对象11
    java 类和对象10
    Java类和对象9
    Java类和对象8
    Java 类和对象7
    包装与方法
    JAVA链表
    泛型
    多态 接口
  • 原文地址:https://www.cnblogs.com/listen9436/p/10644622.html
Copyright © 2011-2022 走看看