uni-app头像上传(完善个人信息功能),后端NodeJs+MySQL

本文涉及的产品
RDS MySQL DuckDB 分析主实例,集群系列 4核8GB
RDS AI 助手,专业版
简介: uni-app头像上传(完善个人信息功能),后端采用的是NodeJs(express.js),数据库采用的是MySQL

1. uni-app代码

<template>
  <view class="page-main">
    <view class="upload">
      <text>头像:</text>
      <!-- <view class="box" @click="chooseUploads">
        <image class="box-img" src="../../static/index/jia.png"></image>
      </view> -->
      <view class="box" @click="upload">
        <image class="box-img" :src="avatar" mode=""></image>
      </view>
    </view>
    <view class="user-info">
      <view class="form">
        <uni-forms ref="form" :modelValue="formData" label-position="left">
          <!-- :rules="rules" name="iphone"name="password"   avatar-->
          <uni-forms-item label="姓名:" label-width="20px">
            <input class="input" type="text" value="" v-model="formData.Susername" placeholder="请输入姓名" />
          </uni-forms-item>
          <uni-forms-item label="性别:" label-width="0px">
            <input class="input" type="text" value="" v-model="formData.Ssex" placeholder="请输入性别" />
          </uni-forms-item>
          <uni-forms-item label="年龄:" label-width="0px">
            <input class="input" type="text" value="" v-model="formData.Sage" placeholder="请输入年龄" />
          </uni-forms-item>
          <uni-forms-item label="个人简介:" label-width="0px">
            <textarea class="input-textarea" type="textarea" value="" v-model="formData.direction"
              placeholder="请输入" />
          </uni-forms-item>
        </uni-forms>
        <button class="loginBtn" type="primary" @click="submit"><text class="btnValue">提交</text></button>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
         iconcheck:0, //头像是否改变
        avatar:"", //默认头像
        formData: {
          direction: '',
          Sage: '',
          Ssex: '',
          Susername: '',
        },
      }
    },
    methods: {
      upload(){
        uni.chooseImage({
          count:1,
          success: (res)=>{
            this.avatar=res.tempFilePaths[0]
          }
        })
      },
      submit(){
        console.log(this.avatar)
        var _this = this;
        uni.uploadFile({
            url: 'http://47.107.93.173:3000/avatar', //仅为示例,并非真实接口地址。
          filePath: _this.avatar,
          name: 'avatar',
            formData: {
            'direction':_this.formData.direction,
            'Sage':_this.formData.Sage,
            'Ssex':_this.formData.Ssex,
            'Susername':_this.formData.Susername,
            },
            success: (res) => {
                console.log(res);
            }
        });
      }
    }
  }
</script>

2. 后端代码

exports.avatar = (req,res)=>{
    const avatar ={
        avatar:req.file.filename
    }
    const info = req.body;
    Object.assign(info,avatar)
    let sql = 'update users  set avatar=?,Ssex=?,Sage=?,direction=? where Susername=?;';
    let data = [info.avatar,info.Ssex,info.Sage,info.direction,info.Susername]
    db.base(sql,data,(result) => {
        if(result.affectedRows >= 1){
           res.send({
               flag:1,
               data:data
           })
        }else{
            return res.send({flag:2});
        }
    })
    }
相关实践学习
每个IT人都想学的“Web应用上云经典架构”实战
本实验从Web应用上云这个最基本的、最普遍的需求出发,帮助IT从业者们通过“阿里云Web应用上云解决方案”,了解一个企业级Web应用上云的常见架构,了解如何构建一个高可用、可扩展的企业级应用架构。
MySQL数据库入门学习
本课程通过最流行的开源数据库MySQL带你了解数据库的世界。 &nbsp; 相关的阿里云产品:云数据库RDS MySQL 版 阿里云关系型数据库RDS(Relational Database Service)是一种稳定可靠、可弹性伸缩的在线数据库服务,提供容灾、备份、恢复、迁移等方面的全套解决方案,彻底解决数据库运维的烦恼。 了解产品详情:&nbsp;https://www.aliyun.com/product/rds/mysql&nbsp;
相关文章
|
4月前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
426 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
7月前
|
SQL 存储 关系型数据库
MySQL功能模块探秘:数据库世界的奇妙之旅
]带你轻松愉快地探索MySQL 8.4.5的核心功能模块,从SQL引擎到存储引擎,从复制机制到插件系统,让你在欢声笑语中掌握数据库的精髓!
220 26
|
9月前
|
Java 关系型数据库 MySQL
在Linux平台上进行JDK、Tomcat、MySQL的安装并部署后端项目
现在,你可以通过访问http://Your_IP:Tomcat_Port/Your_Project访问你的项目了。如果一切顺利,你将看到那绚烂的胜利之光照耀在你的项目之上!
466 41
|
9月前
|
开发框架 Java 关系型数据库
在Linux系统中安装JDK、Tomcat、MySQL以及部署J2EE后端接口
校验时,浏览器输入:http://[your_server_IP]:8080/myapp。如果你看到你的应用的欢迎页面,恭喜你,一切都已就绪。
593 17
|
9月前
|
Java 关系型数据库 MySQL
在Linux操作系统上设置JDK、Tomcat、MySQL以及J2EE后端接口的部署步骤
让我们总结一下,给你的Linux操作系统装备上最强的军队,需要先后装备好JDK的弓箭,布置好Tomcat的阵地,再把MySQL的物资原料准备好,最后部署好J2EE攻城车,那就准备好进军吧,你的Linux军团,无人可挡!
209 18
|
9月前
|
关系型数据库 MySQL Java
安装和配置JDK、Tomcat、MySQL环境,以及如何在Linux下更改后端端口。
遵循这些步骤,你可以顺利完成JDK、Tomcat、MySQL环境的安装和配置,并在Linux下更改后端端口。祝你顺利!
534 11
|
9月前
|
开发框架 关系型数据库 Java
Linux操作系统中JDK、Tomcat、MySQL的完整安装流程以及J2EE后端接口的部署
然后Tomcat会自动将其解压成一个名为ROOT的文件夹。重启Tomcat,让新“植物”适应新环境。访问http://localhost:8080/yourproject看到你的项目页面,说明“植物”种植成功。
275 10
|
8月前
|
JSON 前端开发 数据库
《仿盒马》app开发技术分享-- 个人信息页(23)
上一节我们实现了个人中心的业务逻辑,实现了个人信息修改后的动态更换,而且实现了一个静态的头像选择弹窗,但是这个弹窗我们并没有使用。这一节我们在个人信息页面就会使用到这个弹窗并且还涉及其他的弹窗。以及信息的同步展示和修改
200 0
|
8月前
|
存储 数据库
《仿盒马》app开发技术分享-- 购物车功能完善(14)
上一节我们实现了购物车商品列表的状态切换,已添加商品数量的增减,已添加商品滑动删除,已添加商品在选中情况下的价格计算。这一节我们在这些功能的基础上实现云端记录,因为我们现在只有数据的查询是从云端获取的,其他的操作虽然都实现了相对应的功能,但是当我们操作完,关闭app,再打开不会有对应的记录,有的同学可能会说,那我们把数据用首选项或者数据库的形式存储就可以了吧? 那如果我更换了另一个设备那这些添加的数据是不是就又不能使用了?所以我们的每个操作,最好都是提交到云端,这样我们在其他设备,在退出应用,切换账号这些情况下都能很好的保存我们操作后的购物车状态。
133 0
|
11月前
|
存储 关系型数据库 MySQL
MySQL细节优化:关闭大小写敏感功能的方法。
通过这种方法,你就可以成功关闭 MySQL 的大小写敏感功能,让你的数据库操作更加便捷。
883 19

推荐镜像

更多