注意点

action为组件的默认请求，接口前需要加api

使用

前端

<template>
  <div class="fa">
    <div class="son1">
      <h3>头像：</h3>
      <br />
      <el-upload
        class="avatar-uploader"
        action="/api/uploadFile"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :limit="1"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </div>
    <br />
    <div class="son2">
      <h3>昵称：</h3>
      <br />
      <el-input v-model="uname" placeholder="请输入你的昵称" clearable /><br />
      <br />
      <h3>密码：</h3>
      <br />
      <el-input
        v-model="pwd"
        type="password"
        placeholder="请输入密码"
        show-password
        clearable
      />
      <br />
      <br />
      <h3>确认密码：</h3>
      <br />
      <el-input
        placeholder="请再次输入密码"
        show-password
        clearable
        type="password"
        v-model="confirmPassword"
        @blur="confirmFunc"
      />
      <br />
      <br />
      <el-button @click="fn" type="primary">提交</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { useRoute, useRouter } from "vue-router";
import type { UploadProps } from "element-plus";
import { useStore } from "../stores/counter";
let store = useStore();
let confirmPassword: any = ref("");
let router = useRouter();
let pwd = ref("");
let route = useRoute();
let uid = route.query.uid;
let { proxy }: any = getCurrentInstance();
const imageUrl = ref("");
let uname = ref("");
let img = ref("");
//   密码正则
let pwdExg: any =
  /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*()_.]+)$)^[\w~!@#$%^&*()_.]{8,16}$/; //密码应为字母，数字，特殊符号(~!@#$%^&*()_.)，两种及以上组合，8-16位字符串，如：xyl37@baa
onMounted(async () => {
  let re = await proxy.$axios("/ystx", { params: { uid: uid } });
  uname.value = re.data.uname;
  imageUrl.value = re.data.img;
  img.value = re.data.img;
  pwd.value = re.data.pwd;
});
const handleAvatarSuccess: UploadProps["onSuccess"] = async (
  response,
  uploadFile
) => {
  console.log(response, uploadFile);
  img.value = response.data.url;
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
  console.log(imageUrl.value);
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("Avatar picture must be JPG format!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("Avatar picture size can not exceed 2MB!");
    return false;
  }
  return true;
};

async function fn(): Promise<any> {
  if (pwdExg.test(pwd.value) && confirmPassword.value == pwd.value) {
    let re = await proxy.$axios.post("/xgxx", {
      uname: uname.value,
      img: img.value,
      pwd: pwd.value,
      uid: uid,
    });
    ElMessage.success(re.data.info);
    uname.value = "";
    imageUrl.value = "";
    pwd.value = "";
    localStorage.clear();
    router.push("/register");
  } else if (confirmPassword.value !== pwd.value) {
    ElMessage.error("请确认密码");
  } else {
    ElMessage.error(
      "密码应为字母，数字，特殊符号(~!@#$%^&*()_.)，两种及以上组合，8-16位字符串，如：xyl37@baa"
    );
  }
}
//确认密码
const confirmFunc = () => {
  if (confirmPassword.value !== pwd.value)
    ElMessage({
      showClose: true,
      message: "密码与确认密码不一致",
      type: "error",
    });
};
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>

后端

//上传用户的头像
  async uploadFile(){
    let file= this.ctx.request.files[0]
   
       //定义文件去处
       let to = __dirname+"/../public/tx/"+ file.filename
 
       //拷贝文件
       fs.copyFile(file.filepath, to, ()=>{
           //删除文件
          
       fs.unlink(file.filepath,()=>{
        
        
       })
       });
       //修改
       this.ctx.body={
        "errno": 0, 
        "data": {
            "url": `http://localhost:7001/public/tx/${file.filename}`, 
        }
    }
  }

  //修改用户的头像和昵称
  async xgxx(){
    let re=this.ctx.request.body
    let uname=re.uname
    let img=re.img
    let uid=re.uid
    let pwd=re.pwd
    let res=await this.ctx.app.mysql.query(`update user set uname="${uname}",img="${img}",pwd="${pwd}" where uid=${uid}`)
    this.ctx.body={
      code:2000,
      info:"修改成功，请重新登录"
    }
  }