首先说一下这个功能的写法没有错,但是我正在找是哪个地发出错了,这个功能我没有实现,先记录一下( 报我类型的错 )
结构
<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; }
原文地址:https://www.cnblogs.com/home-/p/11718017.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。