在 Vue 3 中使用 Vant 组件库进行图片上传，您可以使用 Vant 的 ImageUploader 组件。ImageUploader 是 Vant 提供的图片上传组件，可以方便地实现图片上传功能。
以下是一个简单的示例，演示如何在 Vue 3 中使用 Vant 的 ImageUploader 组件进行图片上传：
首先，确保您已经安装并配置了 Vant 组件库。您可以在项目中使用 npm 或 yarn 安装 Vant：
1. npm install vant --save 2. yarn add vant
在 main.js 或 main.ts 中全局引入 Vant 组件库和样式：
1. import { createApp } from 'vue'; 2. import Vant from 'vant'; 3. import 'vant/lib/index.css'; 4. 5. const app = createApp(App); 6. app.use(Vant); 7. app.mount('#app');
在需要使用上传组件的组件中，使用 Vant 的 ImageUploader 组件：
1. <template> 2. <div> 3. <van-image-uploader 4. v-model="imageUrl" 5. :max-count="1" <!-- 最多上传图片数量，此处限制为1张 --> 6. :upload-text="uploadText" <!-- 上传按钮的文字 --> 7. :before-read="beforeRead" <!-- 上传前的处理函数 --> 8. /> 9. </div> 10. </template> 11. 12. <script> 13. import { ref } from 'vue'; 14. 15. export default { 16. setup() { 17. const imageUrl = ref(''); // 图片的URL 18. const uploadText = ref('上传图片'); // 上传按钮的文字 19. 20. const beforeRead = (file) => { 21. // 可以在这里进行一些上传前的验证操作 22. const isImage = file.type.indexOf('image') !== -1; 23. if (!isImage) { 24. Toast('只能上传图片文件'); 25. } 26. return isImage; // 返回 false 可以阻止上传 27. }; 28. 29. return { 30. imageUrl, 31. uploadText, 32. beforeRead, 33. }; 34. }, 35. }; 36. </script> 37. 38. <style> 39. /* 这里可以根据需求自定义样式 */ 40. </style>
在这个示例中，我们使用了 Vant 的 ImageUploader 组件来实现图片上传功能。用户点击上传按钮后，会触发上传操作，并在上传成功后将图片显示出来。在上传之前，我们可以通过 beforeRead 方法进行一些验证操作，例如限制只能上传图片类型的文件。
注意：示例中的图片 URL 是通过 v-model 进行绑定的，您可以根据实际需求修改成您自己的图片数据。
