uni-app頭像上傳（完善個(gè)人信息功能），后端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="請(qǐng)輸入姓名" />
</uni-forms-item>
<uni-forms-item label="性別：" label-width="0px">
<input class="input" type="text" value="" v-model="formData.Ssex" placeholder="請(qǐng)輸入性別" />
</uni-forms-item>
<uni-forms-item label="年齡：" label-width="0px">
<input class="input" type="text" value="" v-model="formData.Sage" placeholder="請(qǐng)輸入年齡" />
</uni-forms-item>
<uni-forms-item label="個(gè)人簡(jiǎn)介：" label-width="0px">
<textarea class="input-textarea" type="textarea" value="" v-model="formData.direction"
placeholder="請(qǐng)輸入" />
</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:"", //默認(rèn)頭像
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', //僅為示例，并非真實(shí)接口地址。
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});
? ? ? ? }
? ? })
? ? }
```
