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

简介: 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;
相关文章
|
11月前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
1219 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
存储 前端开发 安全
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
459 5
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
832 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
SQL 存储 关系型数据库
MySQL功能模块探秘:数据库世界的奇妙之旅
]带你轻松愉快地探索MySQL 8.4.5的核心功能模块,从SQL引擎到存储引擎,从复制机制到插件系统,让你在欢声笑语中掌握数据库的精髓!
424 26
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
632 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
前端开发
《仿盒马》app开发技术分享-- 个人中心页or静态头像选择(业务逻辑)(22)
上一节我们实现了登录页面的业务逻辑,并且成功的实现了数据的查询,同时我们新增了用户首选项的工具类,现在主界面往登录页面跳转,登录成功后我们关闭登录页面,这时候我们就会回到个人中心页面,那么现在我们的业务逻辑是一种什么样的形式?登录成功后我们需要显示用户的信息,并且在下次登录时依旧展示个人信息。同时我们还新增了一个头像选择的静态弹窗,丰富个人信息页面
292 1
|
存储 关系型数据库 MySQL
MySQL细节优化:关闭大小写敏感功能的方法。
通过这种方法,你就可以成功关闭 MySQL 的大小写敏感功能,让你的数据库操作更加便捷。
1356 19
|
JSON 前端开发 数据库
《仿盒马》app开发技术分享-- 个人信息页(23)
上一节我们实现了个人中心的业务逻辑,实现了个人信息修改后的动态更换,而且实现了一个静态的头像选择弹窗,但是这个弹窗我们并没有使用。这一节我们在个人信息页面就会使用到这个弹窗并且还涉及其他的弹窗。以及信息的同步展示和修改
287 0
|
存储 数据库
《仿盒马》app开发技术分享-- 购物车功能完善(14)
上一节我们实现了购物车商品列表的状态切换,已添加商品数量的增减,已添加商品滑动删除,已添加商品在选中情况下的价格计算。这一节我们在这些功能的基础上实现云端记录,因为我们现在只有数据的查询是从云端获取的,其他的操作虽然都实现了相对应的功能,但是当我们操作完,关闭app,再打开不会有对应的记录,有的同学可能会说,那我们把数据用首选项或者数据库的形式存储就可以了吧? 那如果我更换了另一个设备那这些添加的数据是不是就又不能使用了?所以我们的每个操作,最好都是提交到云端,这样我们在其他设备,在退出应用,切换账号这些情况下都能很好的保存我们操作后的购物车状态。
224 0

推荐镜像

更多