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

发布一下 0 0

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});        }    })    }



版权声明:内容来源于互联网和用户投稿 如有侵权请联系删除

本文地址:http://0561fc.cn/65250.html