vue3 vantUi4 上传图片功能

Vue3 和 Vant UI 4 提供了方便的上传图片功能。Vant UI 的 van-image 组件可以用于显示和选择图片，而 van-file-uploader 或者 van-upload 组件则可以帮助处理文件上传操作。以下是使用这两个组件的基本步骤：

首先，安装所需依赖：
npm install vant vant-upload --save
登录后复制

引入所需的库并注册组件：
import { VanImage, VanFileUploader } from 'vant';
import 'vant/lib/index.css'; // 如果没自动导入样式

Vue.use(VanImage);
Vue.component('van-file-uploader', VanFileUploader);
登录后复制

在模板中添加上传组件和相应的事件监听：
<template>
<div>
<van-image v-model="image" @change="onImageChange"></van-image>
<van-file-uploader :before-upload="beforeUpload"
:accept="'.jpg, .jpeg, .png'"
:limit="1"
:multiple="false"
@success="handleSuccess"
@error="handleError">
<button slot="trigger">选择图片</button>
</van-file-uploader>
</div>
</template>
登录后复制

定义数据和方法：
data() {
return {
image: null,
};
},

methods: {
onImageChange(e) {
this.image = e.file;
},
beforeUpload(file) {
// 可选：这里可以对文件进行预检查，如大小限制等
},
handleSuccess(res) {
console.log('上传成功', res);
// 这里可以根据服务器返回的数据处理上传后的图片路径
},
handleError(err) {
console.error('上传失败', err);
},
}
登录后复制