Vue3 图片上传：使用 Naive UI 实现图片上传并返回结果

在 Vue3 中使用 Naive UI 实现图片上传，可以通过以下步骤来完成：

安装 Naive UI 库：

npm install naive-ui

在 Vue 组件中引入 Naive UI 的上传组件和按钮组件：

<template>
  <div>
    <na-upload v-model='fileList' :action='uploadUrl' :show-upload-list='false' :before-upload='beforeUpload'>
      <na-button>选择图片</na-button>
    </na-upload>
  </div>
</template>

在 Vue 组件的data中定义fileList和uploadUrl变量，并在beforeUpload方法中处理图片上传逻辑：

<script>
import { ref } from 'vue';
import { NUpload, NButton } from 'naive-ui';

export default {
  components: {
    NUpload,
    NButton,
  },
  data() {
    return {
      fileList: [],
      uploadUrl: 'http://your-upload-url',
    };
  },
  methods: {
    beforeUpload(file) {
      // 在这里可以处理图片上传逻辑，比如调用接口上传图片
      console.log('上传的文件:', file);
      // 返回上传结果
      return new Promise((resolve, reject) => {
        // 模拟上传成功
        setTimeout(() => {
          resolve();
        }, 2000);
      });
    },
  },
};
</script>

在beforeUpload方法中，可以处理图片上传的逻辑，比如调用接口上传图片，然后返回上传结果。在示例中，我们使用setTimeout模拟上传过程，2秒后返回上传成功。

这样，就可以在 Vue3 中使用 Naive UI 实现图片上传，并返回上传结果。