javascript - 如何解决在使用Naive UI Upload组件时 file.name 为 undefined？

Question

在使用Naive UI 的 Upload 组件时，有如下代码逻辑（已做简化）

我想利用 generateData 在提交的表单上附加数据，但直接读取 file.name 始终为 undefined，直接打印 file 到控制台和使用 JSON.stringify 却能获得符合预期的结果。

<script lang="ts" setup>const generateData = (file: UploadFileInfo) => {  const objectName = file.name  console.log('generateData', objectName)  console.log(JSON.stringify(file, null, 2))  console.log(file)  return {    ...pick(ossDirectPostObjectInfo.value!, ['ossAccessKeyId', 'policy', 'signature']),    key: objectName,    'x-oss-meta-user': userStore.userVO!.id.toString()  }}</script><template>  <n-upload    :data="generateData"  /></template>

期望正常读取 file.name

Answer 1

const generateData = (file: UploadFileInfo) => {  // 使用Vue3的toRaw函数获取源对象，避免响应式代理导致的问题  const nativeFile = toRaw(file);  const objectName = nativeFile.name || file.raw.name; // 尝试两种方式获取文件名  // 打印调试信息  console.log('generateData', objectName);  console.log(JSON.stringify(file, null, 2));  console.log(file);  return {    ...pick(ossDirectPostObjectInfo.value!, ['ossAccessKeyId', 'policy', 'signature']),    key: objectName,    'x-oss-meta-user': userStore.userVO!.id.toString()  };};

import { toRaw } from '@vue/reactivity';

Answer 2

在Naive UI的Upload组件中，generateData方法被设计为在上传之前生成上传所需的参数，如url、headers等。然而，在generateData方法中，file参数可能并不会包含完整的文件信息，比如file.name。这是因为当generateData被调用时，可能还没有从用户那里接收到完整的文件信息。

你可能需要利用Naive UI Upload组件的on-change事件来获取文件信息。这个事件会在用户选择文件后触发，参数中会包含完整的文件信息。

以下是一个可能的解决方案：

<script lang="ts" setup>let selectedFile: File | null = null;const handleFileChange = (file: File) => {  selectedFile = file;}const generateData = () => {  if (selectedFile) {    const objectName = selectedFile.name;    console.log('generateData', objectName);    return {      ...pick(ossDirectPostObjectInfo.value!, ['ossAccessKeyId', 'policy', 'signature']),      key: objectName,      'x-oss-meta-user': userStore.userVO!.id.toString()    }  }  return null;}</script><template>  <n-upload    @change="handleFileChange"    :data="generateData"  /></template>

在这个解决方案中，handleFileChange函数会在用户选择文件后被调用，并保存选择的文件到selectedFile中。然后，在generateData函数中，我们可以检查selectedFile是否存在，如果存在，则使用selectedFile.name来获取文件名。

注意，此解决方案假设ossDirectPostObjectInfo.value!和userStore.userVO!在generateData被调用时是可用的。如果不是这样，你可能需要在调用generateData之前进行额外的检查。