Vue3 图片上传 - 使用 Naive UI 实现简易上传功能

在 Vue 3 中使用 Naive UI 实现图片上传，可以按照以下步骤操作：

1. 安装 Naive UI 库：

npm install naive-ui

2. 引入 Naive UI 的样式文件和组件：
```javascript
import { createApp } from 'vue'
import naive from 'naive-ui'
import 'naive-ui/lib/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(naive)
app.mount('#app')

3. 在 Vue 组件中使用 Naive UI 的上传组件：

   <template>
     <na-upload
       :upload-action='uploadAction'
       :show-upload-list='false'
       @on-success='handleSuccess'
     >
       <na-button>选择文件</na-button>
     </na-upload>
   </template>
   
   <script>
   export default {
     data() {
       return {
         uploadAction: 'your_upload_action_url'
       }
     },
     methods: {
       handleSuccess(response) {
         // 处理上传成功的逻辑
       }
     }
   }
   </script>
   

在上面的代码中，我们使用了 Naive UI 的na-upload组件来实现图片上传。通过给upload-action属性传递上传地址，可以指定文件上传的后端接口。show-upload-list属性用于控制是否展示上传文件列表，我们设置为false，表示不展示上传文件列表。通过监听on-success事件，可以在文件上传成功后执行相应的逻辑。

以上就是在 Vue 3 中使用 Naive UI 实现图片上传的基本步骤。你可以根据具体需求对上传组件进行样式和功能的定制。