• element-ui+vue上传图片和评论现成完整html页面

    其他更多具体完整项目源码可以私聊我，需要付一点点费用哟~

    效果展示

    主要部分的代码讲解

    上传图片

    首先是先通过el标签中的el-upload标签进行图片的上传，然后发送了一条/common/upload请求到服务端进行图片的上传。而on-success进行监听，上传成功后调用函数，将图片的url地址传到form表单中进行回显

    上传成功后调用的函数，将返回的数据传到ruleForm中的image

    对照片格式进行检验

    上传评论

    此处使用的还是el的标签el-input，通过v-model与form表单进行绑定，将数据保存在表单中

    当操作完成的时候点击保存按钮触发submitForm函数

    这个函数的操作是将ruleForm表单的数据保存到params中，然后将表单参数封装发送请求

    发送post请求 

    代码展示 

    html

    2. "en">
    4.     "UTF-8">
    5.     "X-UA-Compatible" content="IE=edge">
    6.     "viewport" content="width=device-width, initial-scale=1.0">
    7.     评论
    8.     
    9.     "stylesheet" href="../../backend/plugins/element-ui/index.css"/>
    10.     "stylesheet" href="../../backend/styles/common.css"/>
    11.     "stylesheet" href="../../backend/styles/page.css"/>
    12.  
    19. "addBrand-container" id="comment-app">
    20.     
      "container">
    21.         
    22.                 ref="ruleForm"
    23.                 :model="ruleForm"
    24.                 :rules="rules"
    25.                 :inline="true"
    26.                 label-width="180px"
    27.                 class="demo-ruleForm"
    28.         >
    29.             
    30.                 
    31.                         label="菜品图片:"
    32.                         prop="region"
    33.                         class="uploadImg"
    34.                 >
    35.                     
    36.                     
    37.                     
    38.                     
    39.                             class="avatar-uploader"
    40.                             action="/common/upload"
    41.                             :show-file-list="false"
    42.                             :on-success="handleAvatarSuccess"
    43.                             :on-change="onChange"
    44.                             ref="upload"
    45.                     >
    47.                         
    48.                                 v-if="imageUrl"
    49.                                 :src="imageUrl"
    50.                                 class="avatar"
    51.                         >
    52.                         
    53.                                 v-else
    54.                                 class="el-icon-plus avatar-uploader-icon"
    55.                         >
    56.                     
    57.                 
    58.
  • "address">
  • label="菜品描述:"
  • prop="region"
  • >
  • v-model="ruleForm.description"
  • type="textarea"
  • :rows="3"
  • placeholder="菜品描述，最长200字"
  • maxlength="200"
  • />
  • "subBox address">
  • @click="goBack()">
  • 取消
  • type="primary"
  • @click="submitForm('ruleForm')"
  • >
  • 保存

    • css

    1. .dashboard-container {
    2.     padding: 20px;
    3. }
    4.  
    5. .dashboard-container .container {
    6.     background: #fff;
    7.     position: relative;
    8.     z-index: 1;
    9.     padding: 30px 28px;
    10.     border-radius: 4px;
    11. }
    12.  
    13. .dashboard-container .container .tableBar {
    14.     display: flex;
    15.     margin-bottom: 20px;
    16.     justify-content: space-between;
    17. }
    18.  
    19. .dashboard-container .container .tableBox {
    20.     width: 100%;
    21.     border: solid 2px #f3f4f7;
    22.     border-radius: 2px;
    23. }
    24.  
    25. .dashboard-container .container .tableBox .el-image img {
    26.     width: 40px;
    27.     border-radius: 5px;
    28. }
    29.  
    30. .dashboard-container .container .pageList {
    31.     text-align: center;
    32.     margin-top: 30px;
    33. }
    34.  
    35. .dashboard-container .container .tableLab .span-btn {
    36.     cursor: pointer;
    37.     display: inline-block;
    38.     font-size: 14px;
    39.     padding: 0 20px;
    40.     color: #818693;
    41.     border-right: solid 1px #d8dde3;
    42. }
    43.  
    44. .dashboard-container .container .tableLab .el-button {
    45.     margin-left: 10px;
    46. }
    47.  
    48. .el-table-column--selection .cell {
    49.     padding-left: 10px;
    50. }
    51.  
    52. /* 添加 */
    53. .addBrand-container .avatar-uploader .el-upload {
    54.     border: 1px dashed #d9d9d9;
    55.     border-radius: 6px;
    56.     cursor: pointer;
    57.     position: relative;
    58.     overflow: hidden;
    59. }
    60.  
    61. .addBrand-container .avatar-uploader .el-upload:hover {
    62.     border-color: #409eff;
    63. }
    64.  
    65. .addBrand-container .avatar-uploader-icon {
    66.     font-size: 28px;
    67.     color: #8c939d;
    68.     width: 200px;
    69.     height: 160px;
    70.     line-height: 160px;
    71.     text-align: center;
    72. }
    73.  
    74. .addBrand-container .avatar {
    75.     width: 160px;
    76.     height: 160px;
    77.     display: block;
    78. }
    79.  
    80. .addBrand-container .el-form--inline .el-form-item__content {
    81.     width: 293px;
    82. }
    83.  
    84. .addBrand-container .el-input {
    85.     width: 293px;
    86. }
    87.  
    88. .addBrand-container {
    89.     margin: 30px;
    90. }
    91.  
    92. .addBrand-container .container {
    93.     position: relative;
    94.     z-index: 1;
    95.     background: #fff;
    96.     padding: 30px;
    97.     border-radius: 4px;
    98.     min-height: 500px;
    99. }
    100.  
    101. .addBrand-container .container .subBox {
    102.     padding-top: 30px;
    103.     text-align: center;
    104.     border-top: solid 1px #f3f4f7;
    105. }
    106.  
    107. .flavorBox {
    108.     width: 777px;
    109. }
    110.  
    111. .flavorBox .addBut {
    112.     background: #ffc200;
    113.     display: inline-block;
    114.     padding: 0px 20px;
    115.     border-radius: 3px;
    116.     line-height: 40px;
    117.     cursor: pointer;
    118.     border-radius: 4px;
    119.     color: #333333;
    120.     font-weight: 500;
    121. }
    122.  
    123. .flavorBox .flavor {
    124.     border: solid 1px #dfe2e8;
    125.     border-radius: 3px;
    126.     padding: 15px;
    127.     background: #fafafb;
    128. }
    129.  
    130. .flavorBox .flavor .title {
    131.     color: #606168;
    132. }
    133.  
    134. .flavorBox .flavor .cont .items {
    135.     display: flex;
    136.     margin: 10px 0;
    137. }
    138.  
    139. .flavorBox .flavor .cont .items .itTit {
    140.     width: 150px;
    141.     margin-right: 15px;
    142. }
    143.  
    144. .flavorBox .flavor .cont .items .itTit input {
    145.     width: 100%;
    146.     line-height: 40px;
    147.     border-radius: 3px;
    148.     padding: 0 10px;
    149. }
    150.  
    151. .flavorBox .flavor .cont .items .labItems {
    152.     flex: 1;
    153.     display: flex;
    154.     flex-wrap: wrap;
    155.     border-radius: 3px;
    156.     min-height: 39px;
    157.     border: solid 1px #d8dde3;
    158.     background: #fff;
    159.     padding: 0 5px;
    160. }
    161.  
    162. .flavorBox .flavor .cont .items .labItems span {
    163.     display: inline-block;
    164.     color: #f19c59;
    165.     margin: 5px;
    166.     line-height: 26px;
    167.     height: 26px;
    168.     padding: 0 10px;
    169.     background: #fdf4eb;
    170.     border-radius: 3px;
    171.     border: solid 1px #fae2cd;
    172. }
    173.  
    174. .flavorBox .flavor .cont .items .labItems span i {
    175.     cursor: pointer;
    176.     font-style: normal;
    177. }
    178.  
    179. .flavorBox .flavor .cont .items .labItems .inputBox {
    180.     display: inline-block;
    181.     width: 100%;
    182.     height: 36px;
    183.     line-height: 36px;
    184.     overflow: hidden;
    185. }
    186.  
    187. .flavorBox .flavor .cont .items .delFlavor {
    188.     display: inline-block;
    189.     padding: 0 10px;
    190.     color: #f19c59;
    191.     cursor: pointer;
    192. }
    193.  
    194. .addBrand-container .address .el-form-item__content {
    195.     width: 777px !important;
    196. }
    197.  
    198. .el-button--text {
    199.     font-weight: 400 !important;
    200.     font-size: 13px !important;
    201. }
    202.  
    203. .el-table td {
    204.     font-size: 13px !important;
    205. }
    206.  
    207. .el-table .cell,
    208. .el-table th div,
    209. .el-table--border td:first-child .cell,
    210. .el-table--border th:first-child .cell {
    211.     padding-left: 12px;
    212. }

  • 相关阅读:
    【操作系统】第一章：概述
    IDEA—右边maven模块不见了
    生成对抗性网络简介
    云原生平台，让边缘应用玩出花！
    HashMap高频面试题，让你掌握青铜回答与王者级回答，你值得拥有
    【C语言】深度剖析动态内存管理
    node开发MongoDB
    P5906 【模板】回滚莫队&不删除莫队
    leetcode/两个链表的第一个重合节点
    Dubbo线程池
  • 原文地址：https://blog.csdn.net/m0_62314761/article/details/133122575