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

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,高可用系列 2核4GB
简介: 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});
        }
    })
    }
相关实践学习
如何在云端创建MySQL数据库
开始实验后,系统会自动创建一台自建MySQL的 源数据库 ECS 实例和一台 目标数据库 RDS。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
30天前
|
JavaScript 前端开发 中间件
探索后端技术:Node.js与Express框架的完美融合
【10月更文挑战第7天】 在当今数字化时代,Web应用已成为日常生活不可或缺的一部分。本文将深入探讨后端技术的两大重要角色——Node.js和Express框架,分析它们如何通过其独特的特性和优势,为现代Web开发提供强大支持。我们将从Node.js的非阻塞I/O和事件驱动机制,到Express框架的简洁路由和中间件特性,全面解析它们的工作原理及应用场景。此外,本文还将分享一些实际开发中的小技巧,帮助你更有效地利用这些技术构建高效、可扩展的Web应用。无论你是刚入门的新手,还是经验丰富的开发者,相信这篇文章都能为你带来新的启发和思考。
|
1月前
|
JavaScript 前端开发 API
探索后端技术:Node.js的优势和实际应用
【10月更文挑战第6天】 在当今数字化时代,后端开发是任何成功软件应用的关键组成部分。本文将深入探讨一种流行的后端技术——Node.js,通过分析其核心优势和实际应用案例,揭示其在现代软件开发中的重要性和潜力。
109 2
|
2月前
|
Web App开发 JavaScript 前端开发
构建高效后端服务:Node.js与Express框架的实战指南
【9月更文挑战第6天】在数字化时代的潮流中,后端开发作为支撑现代Web和移动应用的核心,其重要性不言而喻。本文将深入浅出地介绍如何使用Node.js及其流行的框架Express来搭建一个高效、可扩展的后端服务。通过具体的代码示例和实践技巧,我们将探索如何利用这两个强大的工具提升开发效率和应用性能。无论你是后端开发的新手还是希望提高现有项目质量的老手,这篇文章都将为你提供有价值的见解和指导。
|
3月前
|
JavaScript 前端开发 中间件
构建高效后端服务:Node.js与Express框架的完美搭档
【8月更文挑战第28天】在追求高性能、可扩展和易维护的后端开发领域,Node.js和Express框架的组合提供了一种轻量级且灵活的解决方案。本文将深入探讨如何利用这一组合打造高效的后端服务,并通过实际代码示例展示其实现过程。
|
9天前
|
JavaScript 中间件 关系型数据库
构建高效的后端服务:Node.js 与 Express 的实践指南
在后端开发领域,Node.js 与 Express 的组合因其轻量级和高效性而广受欢迎。本文将深入探讨如何利用这一组合构建高性能的后端服务。我们将从 Node.js 的事件驱动和非阻塞 I/O 模型出发,解释其如何优化网络请求处理。接着,通过 Express 框架的简洁 API,展示如何快速搭建 RESTful API。文章还将涉及中间件的使用,以及如何结合 MySQL 数据库进行数据操作。最后,我们将讨论性能优化技巧,包括异步编程模式和缓存策略,以确保服务的稳定性和扩展性。
|
16天前
|
Web App开发 JavaScript 中间件
构建高效后端服务:Node.js与Express框架的完美结合
【10月更文挑战第21天】本文将引导你走进Node.js和Express框架的世界,探索它们如何共同打造一个高效、可扩展的后端服务。通过深入浅出的解释和实际代码示例,我们将一起理解这一组合的魅力所在,并学习如何利用它们来构建现代Web应用。
38 1
|
19天前
|
SQL JavaScript 关系型数据库
node博客小项目:接口开发、连接mysql数据库
【10月更文挑战第14天】node博客小项目:接口开发、连接mysql数据库
|
4天前
|
Web App开发 JavaScript 前端开发
探索后端开发:Node.js与Express的完美结合
【10月更文挑战第33天】本文将带领读者深入了解Node.js和Express的强强联手,通过实际案例揭示它们如何简化后端开发流程,提升应用性能。我们将一起探索这两个技术的核心概念、优势以及它们如何共同作用于现代Web开发中。准备好,让我们一起开启这场技术之旅!
13 0
|
4天前
|
Web App开发 JavaScript 前端开发
构建高效后端服务:Node.js与Express框架的实践
【10月更文挑战第33天】在数字化时代的浪潮中,后端服务的效率和可靠性成为企业竞争的关键。本文将深入探讨如何利用Node.js和Express框架构建高效且易于维护的后端服务。通过实践案例和代码示例,我们将揭示这一组合如何简化开发流程、优化性能,并提升用户体验。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的见解和实用技巧。
|
5天前
|
Web App开发 JavaScript 中间件
构建高效后端服务:Node.js与Express框架的融合之道
【10月更文挑战第31天】在追求快速、灵活和高效的后端开发领域,Node.js与Express框架的结合如同咖啡遇见了奶油——完美融合。本文将带你探索这一组合如何让后端服务搭建变得既轻松又充满乐趣,同时确保你的应用能够以光速运行。
11 0

推荐镜像

更多
下一篇
无影云桌面