uni-app头像上传（完善个人信息功能），后端NodeJs+MySQL
## 1. uni-app代码
```vue
<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. 后端代码
```javascript
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});
}
})
}
```
