vue3.2/Vite/Ts42: 处理新增品牌功能

└─src
    ├─api
    │  └─product
    │      └─trademark
    │          └─index.ts
    └─views
        └─product
            └─trademark
                └─index.vue

//...
import { TradeMark } from "./type";
//...
enum API {
  //...
  // 添加品牌
  ADDTRADEMARK_URL = "/admin/product/baseTrademark/save",
  UPDATETRADEMARK_URL = "/admin/product/baseTrademark/update",
  //...
}
//...
export const reqAddOrUpdateTrademark = (data: TradeMark) => {
  if (data.id) {
    // 修改
    return request.put<any, any>(API.UPDATETRADEMARK_URL, data);
  } else {
    // 新增
    return request.post<any, any>(API.ADDTRADEMARK_URL, data);
  }
};
//...

<template>
  <el-card>
    <el-bottom type="primary" size="default" icon="Plus" @click="addTrademark">添加品牌</el-button>
    <!-- ... -->
  </el-card>
  <!-- 对话框组件 -->
  <el-dialog v-model="dialogFormVisible" title="添加品牌">
    <el-form>
      <el-form-item label="品牌名称" label-width="80px">
        <el-input placehodler="请输入品牌名称"  v-model="trademarkParams.tmName"></el-input>
      </el-form-item>
      <el-form-item label="品牌LOGO" label-width="80px">
        <!--
            action: 前缀要携带 /api/
            :before-upload: 可以约束上传的类型
         -->
        <el-upload
            action="/api/admin/product/fileUpload"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :on-success="handleAvatarSuccess"
        >
          <img v-if="trademarkParams.logoUrl" :src="trademarkParams.logoUrl"  />
          <el-icon v-else>
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" size="default" @click="cancel">取消</el-button>
      <el-button type="primary" size="default" @click="confirm">确定</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import type { TradeMark } from "@/api/product/trademark/type";
import { reqHasTrademark, reqAddOrUpdateTrademark } from "@/api/product/trademark";
//...
import type { UploadProps } from "element-plus";
//...

let trademarkParams = reactive<TradeMark>({
  tmName: "",
  logoUrl: "",
});

//...
const cancel = () => {78
  //...
  // 清空数据
  trademarkParams.tmName = '';
  trademarkParams.logoUrl = '';
  //...
}

//...
const confirm = async () => {
  // 提交服务器
  const res: any = await reqAddOrUpdateTrademark(trademarkParams);
  if(res.code === 200) {
    dialogFormVisible.value = false;
    ElMessage({
      type: "success",
      message: "添加品牌成功",
    });
    // 重新请求所有品牌数据，重新渲染 table
    getHasTrademark();
    // 清空数据
    trademarkParams.tmName = '';
    trademarkParams.logoUrl = '';
  } else {
    ElMessage({
      type: "error",
      message: "添加品牌失败",
    });
    dialogFormVisible.value = false;
  }
};
//...
// 图片上传成功之前触发
let beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  // 约束文件类型
  if (
    rawFile.type === "image/png" ||
    rawFile.type === "image/jpeg" ||
    rawFile.type === "image/gif"
  ) {
    if (rawFile.size / 1024 / 1024<4>) {
      return true;
    } else {
      ElMessage({
        type: "error",
        message: "上传文件大小小于4M",
      });
    }
  } else {
    ElMessage({
      type: "error",
      message: "上传格式错误",
    });
    return false;
  }
};

// 上传成功回调
let handleAvatarSuccess: UploadProps["onSuccess"] =  (response, uploadFile) => {
  // response: 是当前此次上传图片 post 请求的服务器的返回结果
  // uploadFile: 包含服务器返回结果和上传图片的数据
  trademarkParams.logoUrl = response.data;
}
</script>