element-ui upload文件上传

 
        
          
            选取文件
          
          
只能上传jpg/png文件,且不超过500kb
 data() {
      return {
        fileList: []
      }
 }

 methods: {
    beforeAvatarUpload(file) {
        const fileType = file.raw.type;
        const isJPG = fileType === 'image/jpg' || fileType === 'image/jpeg' || fileType ===             'image/png';
        const isLt20M = file.raw.size / 1024 / 1024 < 20;
        if (!isJPG) {
          this.$message.error('上传图片的格式只能是 JPG或PNG 格式!');
        }
        if (!isLt20M) {
          this.$message.error('上传图片的大小不能超过 20M!');
        }
        return isJPG && isLt20M;
      },
     handleRemove(file) {
        const index = this.fileList.indexOf(file.url);
        this.fileList.splice(index, 1);
      },
      /**
       * 上传图片
       * @param {Object} file 文件对象
       * @param {string} fileList 文件列表
       * @return {void} 空
       */
     handleChange(file, fileList) {
        const isFileType = this.beforeAvatarUpload(file);
        // 如果文件类型不对,则清空表单及附件列表
        if (!isFileType) {
          this.fileList = [];
          return;
        }
        if (fileList.length > 1) {
          fileList.shift();
        }
        this.fileList = fileList;
      },
     async submitForm() {
        const formData = new FormData();
        if (this.fileList.length > 0) {
          formData.append('file', this.fileList[0].raw);
        }
        const result = await this.$http.post(httpUrlList.createLeagues, formData);
        console.log(result);
        if (result.data) {
          this.$message.success('success');
          setTimeout(() => {
            this.$router.push({ name: 'competitionSeason' });
          }, 1000);
        }
      },
}

你可能感兴趣的:(vue,el-upload文件上传)