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() },
  • 相关阅读:
    4 linux上运行crm&uwsgi
    Vue 目录
    vue -(滚动播放-全屏展示)
    Chrome 调试技巧
    Vue 遇到的坑
    9 matplotlib
    Maven
    Dev-C++黑暗主体和代码高亮配置
    Git操作:一次push把代码提交到两个仓库
    windows server 2012 r2 快速启动 部署remoteapp 显示服务器有挂起的重启,怎么解决?
  • 原文地址:https://www.cnblogs.com/listen9436/p/10644622.html
Copyright © 2011-2022 走看看