element的单附件上传upload示例

  <el-upload class="avatar-uploader" :action="uploadAction" v-if="activitiModel.id != null"

          :show-file-list="false" :before-upload="beforeAvatarUpload" :on-success="successRes"

          :headers="headers" accept="image/jpeg,image/jpg,image/png">

          <img v-if="ActivitiData.icon !=null " :src="ActivitiData.icon" class="avatar">

          <i v-else class="el-icon-plus avatar-uploader-icon"></i>

  </el-upload>

 

methods: {

　　// 附件上传

      successRes(res) {

        if(res.code == 1){

          //图标上传成功之后回显新图标

          this.ActivitiData.icon = res.imageToBase64;

        }

      },

      beforeAvatarUpload(file) {

        const isJPEG = file.type == 'image/jpeg';

        const isJPG = file.type == 'image/jpg';

        const isPNG = file.type == 'image/png';

        if (!isJPEG && !isJPG && !isPNG) {

          this.$message.error('上传图标只能是jpeg/jpg/png格式!');

        }

        const isLt100Kb = file.size / 1024 < 100;

        if (!isLt100Kb) {

          this.$message.error('上传图标大小不能超过100Kb!');

        }

        return (isJPEG || isJPG || isPNG) && isLt100Kb;

      }

}