首先说一下这个功能的写法没有错,但是我正在找是哪个地发出错了,这个功能我没有实现,先记录一下( 报我类型的错 )
结构
<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; }