解决与后台添加数据的问题

刚开始的时候能够添加数据,但是在添加第二条数据的时候并没有添加到后台,反而是在原有数据上面覆盖了

代码如下:

代码如下

<el-col :span="4">
      <el-button type="primary" size="default" @click="dialogVisibleAddBanner = true">新增Banner</el-button>
    </el-col> 

<!-- 新增Banner弹框 -->
  <el-dialog v-model="dialogVisibleAddBanner" title="新增Banner" width="50%" draggable>
    <div>
      <label>Banner标题:</label> <el-input v-model="AddBannerData.name" maxlength="10" placeholder="Please input"
        show-word-limit type="text" style="width: 400px;" />
    </div>
    <el-upload class="avatar-uploader" action="http://47.109.97.74:8080/admin/upload/image" :show-file-list="false"
      :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 130px;height: 130px; margin-top: 20px;" />
      <el-icon v-else class="avatar-uploader-icon">
        <Plus />
      </el-icon>
    </el-upload>
    <label for="" style="margin-right: 20px;">上架时间:</label>
    <el-radio-group v-model="form.resource" style="margin-top: 20px;">

      <el-radio label="定时发送" />
      <div class="block">
        <span class="demonstration">With default time</span>
        <el-date-picker v-model="AddBannerData.upTime" type="datetime" placeholder="时间选择器 年月日 时分秒"
          :default-time="defaultTime" />
      </div>
      <el-radio label="实时发送" style="margin-left: 10px;" @click="Realtime" />
    </el-radio-group>

    <div style="display: flex;margin-top: 10px;margin-right: 60px;">
      <label for="" style="flex: 1.7;">下架时间:</label>
      <el-date-picker style="flex: 3.8;" v-model="AddBannerData.outTime" type="datetime" placeholder="时间选择器 年月日 时分秒"
        :default-time="defaultTime" />
    </div>
    <div style="display: flex;margin-top: 10px;">
      <label style="flex: 1;">排序:</label> <el-input v-model="AddBannerData.sort" type="text" style="flex: 3;" />
    </div>
    <template #footer #file="{ file }">
      <span class="dialog-footer">
        <el-button @click="dialogVisibleAddBanner = false">取消</el-button>
        <el-button type="primary" @click="Bannerfirm">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>




// 新增Banner图的数据
let AddBannerData = reactive({
  id: '', Image: '', name: '', outTime: '', sort: '', status: '', upTime: ''
})
// 新增的确定
const Bannerfirm = async () => {
  const data = await reqPostAddBanner({ ...AddBannerData })
  console.log(data)
  PostDataOrigin()
  // AddBannerData = {}
  dialogVisibleAddBanner.value = false


}

有两种解决办法,第一种就是让后台忽略我的id字段,然后自增,但是我选择了第二种就是我传递数据的时候把id字段删除了,最后就没有覆盖原有数据了

let AddBannerData = reactive({
  Image: '', name: '', outTime: '', sort: '', status: '', upTime: ''
})