ADD file via upload

flower_user_front/src/views/UserView.vue

@@ -0,0 +1,170 @@
+<template>
+    <div>
+        <div style="display: flex;padding: 50px">
+            <div style="flex: 4;margin-top: 80px">
+                <img :src="require('/Users/zhangjiadi/IdeaProjects/毕业设计/picFiles'+form.user_pic)" style="height: 250px;width: 250px;margin-bottom: 30px" alt="">
+                <el-upload
+                    class="upload-demo"
+                    :on-success="onSuccess"
+                    :on-error="onError"
+                    :action="request"
+                    :headers="headers"
+                    :before-remove="beforeRemove"
+                    :limit="1"
+                    :on-exceed="handleExceed"
+                    :file-list="fileList">
+                    <el-button size="small" type="primary">点击上传</el-button>
+                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+                </el-upload>
+            </div>
+            <div style="flex: 5;margin-top: 80px;margin-left:50px;padding-right: 80px">
+                <el-form ref="form" :model="form" label-width="100px" label-position="left">
+                    <el-form-item label="用户名：">
+                        <el-input v-model="form.user_name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="密码：">
+                        <el-input v-model="form.user_pwd" show-password></el-input>
+                    </el-form-item>
+                    <el-form-item label="联系电话：">
+                        <el-input v-model="form.user_phone"></el-input>
+                    </el-form-item>
+                </el-form>
+                <div v-if="form.user_role===1" style="margin-top: 50px;text-align: left">
+                    <el-form>
+                        <el-form-item label="权限：">会员</el-form-item>
+                        <el-form-item label="有效期至：">
+                            {{ form.member_end_time }}
+                        </el-form-item>
+                        <el-form-item label="会员积分：">
+                            {{ form.member_point }}
+                        </el-form-item>
+                    </el-form>
+                </div>
+            </div>
+        </div>
+        <div style="margin-top: 10px">
+            <el-button @click="fetchData" style="margin-right: 100px">重置</el-button>
+            <el-button type="primary" @click="submit">确认修改</el-button>
+        </div>
+    </div>
+</template>
+
+<script>
+import Cookie from "js-cookie";
+import {http} from "@/js/http";
+
+export default {
+    data(){
+        return{
+            form:{
+                user_id:1,
+                user_name:'',
+                user_pwd:'',
+                user_phone:'',
+                user_pic:'',
+                user_role:1,
+                member_end_time:'',
+                member_point:1,
+            },
+            //图片相关
+            request:http+'/upload',
+            headers:{ Authorization: Cookie.get('token') },
+            fileList: []
+        }
+    },
+    created() {
+        this.fetchData();
+    },
+    methods:{
+        fetchData(){
+            const _this=this;
+            try {
+                axios({
+                    method: 'post',
+                    url: 'http://localhost:8181/user/info',
+                    headers: {
+                        Authorization: Cookie.get('token'),
+                        'Content-Type': 'application/json'
+                    }
+                }).then(function (response){
+                    if (response.data.code===200){
+                        //查询所有信息成功
+                        _this.form=response.data.data;
+                    }
+                    if (response.data.code===401){
+                        _this.$message.warning('身份验证失败,请重新登录!')
+                    }
+                    if (response.data.code===403){
+                        const message = response.data.msg;
+                        this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
+                            confirmButtonText: '确定'
+                        })
+                    }
+                });
+            }catch (error){
+                this.$message.warning('页面加载出错,请重试!')
+            }
+        },
+        submit(){
+            const _this=this;
+            try {
+                axios({
+                    method: 'post',
+                    url: 'http://localhost:8181/user/modify',
+                    headers: {
+                        Authorization: Cookie.get('token'),
+                        'Content-Type': 'application/json'
+                    },
+                    data:{
+                        user_name:_this.form.user_name,
+                        user_pwd:_this.form.user_pwd,
+                        user_phone:_this.form.user_phone,
+                        user_pic:_this.form.user_pic,
+                    }
+                }).then(function (response){
+                    if (response.data.code===200){
+                        _this.fetchData()
+                        _this.$message.success('修改成功！')
+                        _this.fileList=[]
+                    }
+                    if (response.data.code===401){
+                        _this.$message.warning('身份验证失败,请重新登录!')
+                    }
+                    if (response.data.code===403){
+                        const message = response.data.msg;
+                        this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
+                            confirmButtonText: '确定'
+                        })
+                    }
+                });
+            }catch (error){
+                this.$message.warning('页面加载出错,请重试!')
+            }
+        },
+        //图片相关
+        handleExceed(files, fileList) {
+            this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+        },
+        beforeRemove(file) {
+            return this.$confirm(`确定移除 ${ file.name }？`);
+        },
+        onSuccess(response){
+            if(response.code===200){
+                this.form.user_pic = response.data.url;
+            }else if (response.code===401){
+                this.$message.warning('身份验证失败,请重新登录!')
+            }else if (response.code===403)
+            {
+                this.$alert("上传失败,具体原因如下:\n"+response.msg, '上传失败', {
+                    confirmButtonText: '确定'
+                })
+            }
+        },
+        onError(){
+            this.$alert("网络请求失败", '上传失败', {
+                confirmButtonText: '确定'
+            })
+        },
+    }
+}
+</script>