欢迎光临散文网 会员登陆 & 注册

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

2022-02-19 21:39 作者:拼搏的小浣熊  | 我要投稿

1. uni-app代码

<template>
<view class="page-main">
 <view class="upload">
  <text>头像:</text>
  <!-- <view @click="chooseUploads">
   <image 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});
       }
   })
   }


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

分享到微博请遵守国家法律