vant4+若依后端
注册功能里的上传图片，通过vant的van-uploader组件上传图片，存入到数据库里的是一个blob:http://localhost:8000/9c-4d3b-b22b-987868fe2cd5，实际上这个图片并没有上传到服务器，感觉像是一个缓存，项目重新启动图片就无法显示了，有没有办法正确的上传图片到服务器和数据库，最好和若依上传图片的路径一样，若依图片存放数据库路径如下
<template>
<img style="height: 200px; width: 100%" src="../assets/010.jpg" alt="" />
<div class="one">注册账号</div>
<div class="text">
<van-form @submit="onSubmit" label-align="right">
<van-cell-group inset>
<van-field v-model="state.userUsername" name="userUsername" placeholder="请输入用户名" label="用户名:"
:rules="[{ required: true, message: '用户名不能为空！' }]" />
<van-field v-model="state.userPassword" name="userPassword" placeholder="请输入密码" type="password" label="密码:"
:rules="[{ required: true, message: '密码不能为空！' }]" />
<van-field v-model="state.userpass2" name="userpass2" placeholder="请确认密码" type="password" label="确认密码："
:rules="[{ validator, validatorMessage: '请确认密码不能为空！' }]" />
<van-field v-model="state.userPhone" name="userPhone" placeholder="请输入电话" label="电话号码:"
:rules="[{ pattern, message: '请输入正确号码' }]" />
<van-field name="userSex" label="性别:">
<template #input>
<van-radio-group v-model="state.userSex" direction="horizontal">
<van-radio name="男">男</van-radio>
<van-radio name="女">女</van-radio>
</van-radio-group>
</template>
</van-field>
<van-field v-model="state.userNickname" name="userNickname" placeholder="请输入昵称" label="昵称:"
:rules="[{ required: true, message: '昵称不能为空！' }]" />
<van-field v-model="state.userName" name="userName" placeholder="请输入姓名" label="姓名:"
:rules="[{ required: true, message: '姓名不能为空！' }]" />
<van-field name="userPic" label="头像上传">
<template #input>
<van-uploader v-model="state.userPic" :after-read="afterRead" :action="action" :max-count="1" />
</template>
</van-field>
</van-cell-group>
<div style="margin: 16px">
<van-button round block type="primary" style="background-color: #f3a778;border: 0px;" native-type="submit">
注册
</van-button>
</div>
</van-form>
</div>
<van-divider :style="{ color: '#f3a778', borderColor: '#f3a778', padding: '0 16px' }" @click="tologin()">
已有账号，返回登陆
</van-divider>
</template>
<script setup>
import { ref } from "vue";
import { RegisterApi } from "@/api";
import { useRouter } from "vue-router";
import { showSuccessToast, showFailToast } from "vant";
import instance from "@/utils/http"
const router = useRouter();
const action = ref(instance.baseURL+ "/profile/upload/user")
//上传图片
const afterRead = (file) => {
console.log(file)
console.log(file.file.name);
};
const state = ref({
userUsername: "",
userPassword: "",
userpass2: "",
userPhone: "",
userSex: "",
userNickname: "",
userName: "",
userPic: []
});
const validatorMessage = (value) => {
if (value === "") {
return "确认密码不能为空！";
}
if (value !== state.value.Arrayuserpass) {
return "两次密码要相同！";
}
return;
};
//正则表达式
const pattern = /^1[3-9]\d{9}$/;
const RegisterUser = async (e) => {
const res = await RegisterApi(e);
console.log(res.code, 'res.code')
if (res.code == "200") {
showSuccessToast("注册成功！");
router.push("/login");
} else {
showFailToast("注册失败！");
}
};
//返回登录
const tologin = () => {
router.push("/login");
};
const onSubmit = (e) => {
RegisterUser(e);
console.log(e);
console.log("+++++");
};
</script>
<style scoped>
.one {
color: #000000;
display: flex;
justify-content: left;
font-size: 30px;
font-family: "宋体";
font-weight: bold;
margin-left: 20px;
}
.van-field_error_message {
color: aqua !important;
}
.btn {
width: 300px;
margin-left: 10%;
height: 50px;
background-color: #48e1e3;
color: white;
border-radius: 20px;
border: 0px;
}
.text {
color: aquamarine;
}
</style>
接口
// 8-插入数据（注册用户）
export const RegisterApi = (events) => {
events.userPic = events.userPic[0].objectUrl
return instance({
url: "/api1/XjnUser/XjnUser",
data: events,
method: "POST",
headers: { "Content-Type": "application/json" },
});
};
项目端口如下图
上传图片时，打印file显示如下
