uni-app頭像上傳(完善個(gè)人信息功能),后端NodeJs+MySQL
<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="請(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. 后端代碼
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});
? ? ? ?}
? ?})
? ?}