首页在Vant UI中 <van-uploader> 上传图片怎么拿到这个图片的地址并把这个图片转为base64

在Vant UI中 <van-uploader> 上传图片怎么拿到这个图片的地址并把这个图片转为base64

时间: 2024-09-18 20:09:20 浏览: 198

在 Vant UI 中，`<van-uploader>` 是一个用于文件上传组件，你可以通过它的 `on-success` 或者 `on-load` 事件来获取上传成功的图片信息，并将其转换为 base64 格式。下面是一个简单的例子： ```html <template> <van-uploader ref="uploader" :action="uploadUrl" @load="handleLoad" @success="handleSuccess" multiple > <div slot="tip">点击或拖拽文件</div> </van-uploader> </template> <script> export default { data() { return { uploadUrl: 'your-upload-url', // 你的上传服务器地址 fileBase64: '', }; }, methods: { handleLoad(file) { // 文件加载完成，可以在这里预览图片 let reader = new FileReader(); reader.onload = function (e) { this.fileBase64 = e.target.result; }; reader.readAsDataURL(file); }, handleSuccess(response, file) { // 图片上传成功，此时 response 就包含了服务器返回的信息，file 就是上传的文件 // 比如你可以从中提取出图片 URL 或者 ID 然后关联到 fileBase64 上 const imageUrl = response.data.url; // 提取服务器返回的图片 URL // 将 URL 转换为 base64 fetch(imageUrl) .then(res => res.blob()) .then(blob => { let reader = new FileReader(); reader.onload = () => { this.fileBase64 = reader.result; }; reader.readAsDataURL(blob); }); }, }, }; </script> ``` 在这个示例中，当你上传成功后，`handleSuccess` 函数会被调用，你可以从 response 获取到图片的 URL，然后通过 fetch API 或者 FileReader 对象将 URL 转化为 base64 格式。

阅读全文