vue vant 上传图片

使用 Vant 组件库在 Vue 中实现图片上传
为了实现在 Vue 项目中使用 Vant 组件库完成图片上传的功能，可以按照如下方法构建应用。这里主要介绍基于 Uploader 组件来创建文件输入框并处理文件的选择与上传逻辑。
安装依赖包
首先确保安装了必要的 npm 包：
npm install @vant/weapp vant vue
登录后复制
创建 Uploader 组件实例
接着可以在页面模板内引入 Vant 的 Uploader 组件，并配置相应的属性以便于控制其行为。
<template>
<div class="upload-container">
<!-- 使用 label 关联 input -->
<label for="fileInput">点击选择图片</label>

<!-- 隐藏原生 input[type=file] -->
<input id="fileInput" type="file" multiple style="display:none;" ref="fileInputRef"
accept="image/*" @change="handleChange"/>

<!-- 显示已选中的图片列表 -->
<van-uploader v-model:file-list="fileList" :after-read="handleReadFile" />

<!-- 展示上传进度条 -->
<progress max="100" :value="uploadProgress">{{ uploadProgress }}%</progress>

<!-- 提交按钮触发实际的上传操作 -->
<button @click="submitFiles()">上传图片</button>
</div>
</template>
登录后复制
处理文件读取及预览
当用户选择了要上传的图片之后，通过监听 change 事件获取到 File 对象数组，并将其转换成 Base64 编码用于即时预览。
<script setup lang="ts">
import { ref } from 'vue';
// 导入所需的 Vant 组件
import '@vant/taro/install'; // 或者 import 'vant/lib/index.css';

const fileList = ref([]); // 存储待上传的文件信息
const uploadProgress = ref(0); // 记录当前上传进度百分比
let xhr; // XMLHttpRequest 实例变量声明

function handleChange(event) {
const files = event.target.files;

Array.from(files).forEach((file, index) => {
let reader = new FileReader();
reader.onloadend = () => {
fileList.value.push({
url: URL.createObjectURL(file),
file,
});

if (index === files.length - 1){
this.$refs.fileInputRef.value = ''; // 清除 input value 方便再次选择相同文件
}
};
reader.readAsDataURL(file);
});
}

async function handleReadFile(content) {
// 如果需要对读取的内容进一步加工（比如压缩），可在此处添加相应逻辑
}
</script>
登录后复制
发起 HTTP 请求执行上传动作
最后定义 submitFiles 方法负责发起 AJAX 请求向服务器发送所选文件的数据流，期间利用 onUploadProgress 更新界面显示的进度状态。
<script setup lang="ts">
...
async function submitFiles() {
const formData = new FormData();

fileList.value.forEach(({ file }) => {
formData.append('files[]', file);
});

try {
xhr = new XMLHttpRequest();
xhr.open('POST', '/api/upload');
xhr.upload.addEventListener('progress', e => {
if (e.lengthComputable) {
uploadProgress.value = Math.round((e.loaded / e.total) * 100);
}
}, false);

xhr.send(formData);

xhr.onreadystatechange = async function(){
if(xhr.readyState===4 &amp;&amp; xhr.status===200){
console.log(JSON.parse(xhr.responseText));
}
};

} catch (error) {
console.error(error.message);
}
}
</script>
登录后复制
上述代码片段展示了如何结合 HTML5 文件 API 和 Vant UI 库提供的 Uploader 组件快速搭建一个支持多张图片批量上传的应用场景[^1]。此外还介绍了怎样捕获上传过程中的实时反馈并通过视觉元素告知给最终用户[^2]。