element-ui中的el-upload组件的使用

  class="c-upload"
  ref="upload"
  :action="uploadUrl"
  :headers="myHeaders"//上传时,请求头的设置
  :data="myData"//配合后端,每次上传需要传递的额外参数
  :limit='limit'
  accept=".xls,.xlsx"//上传文件类型限制
  :on-exceed="onExceed"
  :on-change="onChange"
  :on-success="onSuccess"
  :on-error="onError"
  :file-list="filelist"
  :before-upload="beforeUpload"
  :auto-upload="false"
>
      slot="trigger"
    size="small"
    type="primary"
  >选取文件
        slot="tip"
    class="el-upload__tip"
  >只能上传xls/xlsx/et文件,且不超过一个



 
解决办法:
 上传之前 :before-upload="beforeUpload"  再次做判断
 beforeUpload(file) {
   console.log(file);
   var testmsg = file.name.substring(file.name.lastIndexOf('.')+1);
   const extentsion = testmsg === 'jpg';
   const extentsion = testmsg === 'png';
   const isLt2M = file.size / 1024 / 1024 < 10;
   if(!extension && !!extension2) {
     this.$message({
        message: '上传文件只能是 jpg png 格式',
        type: 'warning'
     })
   }
   if(!isLt2M) {
     this.$message({
       message: '上传文件大小不能超过 10MB!',
       type: 'warning'
     })
   }
 }

data(){

       return {

           uploadUrl:process.env.VUE_BASE_API + "/waht you want";

     }

}

//自己写的判断文件类型函数

getExtensionFileName(filename){

    const extensionArr=filename.split('.')

   return extensionArr[extensionArr.length-1]

}

//onChange

onChange(file,filelist){

    const filename=file.name

   let extensionStr=this.getExtensionFileName(filename)

   const typeArr=['xls','xlsx','et'];

   if(!typeArr.some(ele=>{ele===extensionStr}){

        //上传文件格式错误

       this.filelist=filelist

     this.filelist.pop();//解决奇奇怪怪的错误

   }else{

this.filelist=filelist

}

你可能感兴趣的:(自我总结,elementui,vue.js,javascript)