标签：95px img elementUI 上传 height ruleForm avatar action border

首先说一下这个功能的写法没有错，但是我正在找是哪个地发出错了，这个功能我没有实现,先记录一下( 报我类型的错 )

结构

<el-upload
  :action="actionsUrl" //上传图片的路径
  :show-file-list="false"
  :on-success="handleAvatarSuccess" //上传成功的回调
   name="fileName" //name值必须有
  :limit="1" //限制上传数量
>
  <img
    v-if="this.ruleForm.img"
    :src="this.ruleForm.img"
    class="avatar"
  /> //图片的位置
  <i v-else class="el-icon-plus avatar-uploader-icon"></i> //小图标
</el-upload>

data

ruleForm:{
    img:""，//图片的绑定需要用它赋值地址

　　　 actionsUrl: "/api" + "/grouplesson/edit" //地址最好是拼接一下

}

事件

 handleAvatarSuccess(res, file) {
　　 //这里是如果成功了参数中有相关信息关于地址的然后在赋值就可以
　　 //然后成功后在把this.ruleForm.img传给后端

   console.log(res);

　　this.ruleForm.img = res.相关地址

    
  },

 

css

.avatar-uploader /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 95px;
    height: 95px;
    line-height: 95px;
    text-align: center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
  }
  .avatar {
    width: 95px;
    height: 95px;
  }

 

标签：95px,img,elementUI,上传,height,ruleForm,avatar,action,border
来源： https://www.cnblogs.com/home-/p/11718017.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。