关于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() },

猜你喜欢

转载自www.cnblogs.com/listen9436/p/10644622.html