vue中在点击提交时，先上传照片在新增，但是实际上是同时进行的，如何修改

问题：在新增时，点击提交按钮，理论上是先进行图片列表的提交，在进行保存，但是实际是同时进行了，代码如下：
submitAddDishName()

  const  submitAddDishName = () => {
      uploadFiles()
      console.log("niyongyuan")
      singleDish.dishTaste = chooseTasteList.list.toString()
      console.log(singleDish)
      const form = unref(singleDishRef)
      addDish(singleDish).then(res => {
          if(res.data.code ==="200"){
            ElMessage.success("添加成功")
            uploadRef.value.clearFiles()
            form.resetFields()
            showAddForm.value = false
            chooseTasteList.list =[]
          }

        }).catch(err => console.log(err))
    }

这是点击提交时触发的方法，应该是执行完uploadFiles()后在执行下面的代码，但是uploadFiles未执行完就执行下面的代码了
uploadFiles()

  const uploadFiles=()=>{
      const formData = new FormData()
      if (fileList.list.length==0){
        ElMessage.error("请上传图片")
        return
      }
      for(let i=0;i<fileList.list.length;i++){
        formData.append('file', fileList.list[i])
      }
      uploadFileList(formData).then(res => {
        if(res.data.code=="200"){
          singleDish.dishImage= res.data.data
        }

      }).catch(err => console.log(err))

因为上传是异步操作。你应该在，上传成功的接口then里执行