Element UI 上传组件的使用

  

          <el-upload
          class="upload-demo"
          :action="uploadImgUrl"
          accept=".pdf,.doc,.docx"
          :limit="1"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          :on-change="handleChange"
          :on-exceed="handleExceed"
          :before-upload="onBeforeUpload"
          :file-list="fileList"
            :headers="headers"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传doc/docx/pdf文件，且不超过50MB</div>
          </el-upload >

:headers上传组件并没有走axios，所有没有token,必须用header得到token请求才可以成功

:action="uploadImgUrl"

:action的值是上传附件的服务器接口路径， 需要一个绝对路径

:on-success="uploadSuccess"

:on-success是接口拉取成功后执行的回调函数

 accept=".pdf,.doc,.docx"

accept的值是接收的附件格式，上例中附件只支持.pdf,.doc,.docx这三种格式

 :limit="1"

:limit的值是限制上传附件的个数， 1就是最多能上传一个附件

:before-remove="beforeRemove"

:before-remove删除附件之前的操作，可弹出提示框，是否确认删除。

:on-remove="handleRemove"

:on-remove是点删除x号后的回调函数

:on-error="uploadError"接口拉取失败时的回调函数

 uploadError(){
       this.$message({ message: '附件上传失敗', type: 'error' })
    },

:on-exceed="handleExceed"

 handleExceed(val){
        this.$message({ message: '模板附件最多只能上传一份', type: 'warning' })
    },

:before-upload="onBeforeUpload"上传之前的回调函数，可校验附件的格式和附件大小。

虽然accept有做格式校验，但用户如果返回全选当前文件夹那么其他格式的也会被选中。

    onBeforeUpload(file){
      const isIMAGE = file.type === 'application/msword'||'application/pdf'||'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
       const isLt1M = file.size < 1024*1024*50;
      if (!isIMAGE) {
        this.$message.error('上传文件只能是图片格式!');
      }
      if (!isLt1M) {
        this.$message.error('上传文件大小不能超过 50MB!');
      }
       return isIMAGE && isLt1M;
    },