每一个你不满意的现在,都有一个你不努力的曾经. 网站首页 > js
el-upload 组件取文件后base64格式直接上传
发布时间:2023-07-07 16:01:35 修改时间:2023-07-07 16:01:35 阅读:3217 评论:0 0
element-ui el-upload 组件取文件后直接上传并且上传base64格式
在 Element UI 的 el-upload 组件中,默认行为是在选择文件后立即上传文件。如果直接将文件以 base64 格式上传,你可以修改示例代码中的 handleBeforeUpload 方法,将文件转换为 base64 格式后直接进行上传。
<template> <el-upload class="upload-demo" action="/your-upload-endpoint" :on-success="handleUploadSuccess" :on-error="handleUploadError" :auto-upload="true" :data="uploadData" > <el-button slot="trigger" size="small" type="primary">选取文件</el-button> </el-upload> </template> <script> export default { data() { return { uploadData: {} // 上传数据 }; }, methods: { handleUploadSuccess(response, file, fileList) { // 文件上传成功的处理 console.log(response); }, handleUploadError(error, file, fileList) { // 文件上传失败的处理 console.error(error); }, handleBeforeUpload(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { // 将 base64 数据保存到上传数据中 this.uploadData.base64 = reader.result; resolve(file); }; reader.onerror = (error) => reject(error); }); } } }; </script>
在上述示例中,将 auto-upload 属性设置为 true,以便在选择文件后立即进行上传。同时,我们将 base64 数据保存到 uploadData 对象中,并将其作为上传数据传递给 el-upload 组件的 data 属性。
回复列表
关键字词:span,nbsp,style,font-size,1px,上传
上一篇:css常用属性