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

本文涉及的产品
RDS Agent(兼容OpenClaw),2核4GB
RDS AI 助手,专业版
RDS MySQL DuckDB 分析主实例,集群系列 4核8GB
简介: 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;
相关文章
|
9月前
|
存储 前端开发 安全
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
367 5
|
SQL 关系型数据库 MySQL
网安入门之MySQL后端基础
《网安入门之MySQL后端基础》简介: 本文介绍了数据库及MySQL的基础知识,涵盖数据库的概念、结构与操作。数据库是组织化存储数据的集合,通过表、列、行等结构实现高效管理。MySQL作为开源的关系型数据库管理系统,广泛应用于Web开发。文中详细讲解了MySQL的基本操作,如增(INSERT)、删(DELETE)、改(UPDATE)、查(SELECT)等语句的使用方法,并介绍了数据库事务的ACID特性。此外,还探讨了SQL注入攻击的风险及防范措施,强调了预处理语句的重要性。最后,简述了PHP中mysqli扩展的使用方法,包括连接数据库、执行查询和关闭连接等步骤。
|
10月前
|
存储 关系型数据库 MySQL
使用命令行cmd查询MySQL表结构信息技巧分享。
掌握了这些命令和技巧,您就能快速并有效地从命令行中查询MySQL表的结构信息,进而支持数据库维护、架构审查和优化等工作。
810 9
|
Java 关系型数据库 MySQL
在Linux平台上进行JDK、Tomcat、MySQL的安装并部署后端项目
现在,你可以通过访问http://Your_IP:Tomcat_Port/Your_Project访问你的项目了。如果一切顺利,你将看到那绚烂的胜利之光照耀在你的项目之上!
588 41
|
12月前
|
前端开发
《仿盒马》app开发技术分享-- 个人中心页or静态头像选择(业务逻辑)(22)
上一节我们实现了登录页面的业务逻辑,并且成功的实现了数据的查询,同时我们新增了用户首选项的工具类,现在主界面往登录页面跳转,登录成功后我们关闭登录页面,这时候我们就会回到个人中心页面,那么现在我们的业务逻辑是一种什么样的形式?登录成功后我们需要显示用户的信息,并且在下次登录时依旧展示个人信息。同时我们还新增了一个头像选择的静态弹窗,丰富个人信息页面
245 1
|
开发框架 Java 关系型数据库
在Linux系统中安装JDK、Tomcat、MySQL以及部署J2EE后端接口
校验时,浏览器输入:http://[your_server_IP]:8080/myapp。如果你看到你的应用的欢迎页面,恭喜你,一切都已就绪。
818 17
|
Java 关系型数据库 MySQL
在Linux操作系统上设置JDK、Tomcat、MySQL以及J2EE后端接口的部署步骤
让我们总结一下,给你的Linux操作系统装备上最强的军队,需要先后装备好JDK的弓箭,布置好Tomcat的阵地,再把MySQL的物资原料准备好,最后部署好J2EE攻城车,那就准备好进军吧,你的Linux军团,无人可挡!
503 18
|
关系型数据库 MySQL Java
安装和配置JDK、Tomcat、MySQL环境,以及如何在Linux下更改后端端口。
遵循这些步骤,你可以顺利完成JDK、Tomcat、MySQL环境的安装和配置,并在Linux下更改后端端口。祝你顺利!
696 11
|
开发框架 关系型数据库 Java
Linux操作系统中JDK、Tomcat、MySQL的完整安装流程以及J2EE后端接口的部署
然后Tomcat会自动将其解压成一个名为ROOT的文件夹。重启Tomcat,让新“植物”适应新环境。访问http://localhost:8080/yourproject看到你的项目页面,说明“植物”种植成功。
352 10
|
12月前
|
JSON 前端开发 数据库
《仿盒马》app开发技术分享-- 个人信息页(23)
上一节我们实现了个人中心的业务逻辑,实现了个人信息修改后的动态更换,而且实现了一个静态的头像选择弹窗,但是这个弹窗我们并没有使用。这一节我们在个人信息页面就会使用到这个弹窗并且还涉及其他的弹窗。以及信息的同步展示和修改
245 0

热门文章

最新文章

推荐镜像

更多