vue3naive-ui使用n-upload 禁止打开文件对话框

在 Vue3 中，Naive UI 的 `n-upload` 组件默认会在用户点击上传按钮时弹出文件选择对话框。如果你想要禁止这个对话框直接显示，并让用户通过其他方式（如拖拽文件、input[type=file]等）上传文件，你可以通过组件的 `auto-upload` 和 `show-file-list` 属性来控制。

设置 `auto-upload` 为 `false` 可以阻止默认的上传行为，然后手动触发上传，例如：

<n-upload :auto-upload="false" @on-success="handleSuccess">
  <n-button type="primary">点击上传</n-button>
</n-upload>

<script>
export default {
  methods: {
    handleSuccess(file) {
      // 这里处理上传成功的逻辑，例如使用formdata或者axios发送请求
      this.$refs.upload.submit();
    }
  }
}
</script>

同时，将 `show-file-list` 设置为 `false` 会隐藏上传列表。这样用户只能看到上传按钮，无法直接从文件系统选择文件。

请注意，你需要自定义一些额外的逻辑来实现文件的上传功能。如果你希望支持拖放上传，可以在 DOM 上添加 `draggable` 属性，并监听 dragover 和 drop 事件来处理。