若依vue3+elementplus文件上传

本文介绍了如何在Vue3项目中使用ElementPlus组件进行文件的单文件上传,并展示了前端如何处理上传数据以及后端如何接收和处理MultipartFile。包括FormData的使用和AJAX请求的交互过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue3+elementplus 单文件上传

端前

<template>

    <el-upload
            multiple
            action="#"
            class="upload-demo"
            :auto-upload="false"
            :on-change="change">
         <el-button type="primary">上传</el-button>
    </el-upload>

<template>



const change = (data) => {
  let formData = new FormData();
  formData.append('file', data.raw);
   // 检查是否成功添加数据到 FormData 对象中
  if (formData.has('file')) {
    console.log('FormData 中包含数据');
    console.log(formData.get('file'));
### Vue3 Element Plus 文件上传组件二次上传失效解决方案 对于 `el-upload` 组件第一次上传失败后无法再次上传的问题,主要原因是当文件处于 `ready` 状态时,即使调用了提交方法也无法触发新的上传行为[^1]。 为了修复这一问题,可以采取以下措施: #### 清除已存在的待上传文件列表 在每次尝试新上传之前清除现有的 `uploadFiles` 列表。这可以通过监听上传错误事件并清空文件队列来实现: ```javascript <template> <el-upload ref="uploadRef" :on-error="handleError"> </el-upload> </template> <script setup> import { ref } from &#39;vue&#39;; const uploadRef = ref(null); function handleError() { // 清理所有准备上传的文件项 if (uploadRef.value) { uploadRef.value.clearFiles(); } } </script> ``` 这样做能够确保即便首次上传不成功也不会残留任何旧的状态影响后续操作。 另外一种方式是在用户选择要上传的新文件前手动清理掉之前的记录,从而避免重复添加相同名称或路径下的文件造成冲突。 #### 自定义上传逻辑处理 如果默认的行为仍然不符合需求,则考虑完全接管整个上传过程,即禁用自动上传功能并通过编程的方式控制何时发起请求以及如何管理文件状态变化。 ```html <template> <el-upload action="" :auto-upload="false" :file-list="fileList" @change="handleChange" @submit="handleSubmit"> <!-- slot content --> </el-upload> </template> <script setup> // ... other imports ... import axios from "axios"; let fileList = reactive([]); async function handleSubmit(file, fileList){ try{ const formData = new FormData(); formData.append(&#39;file&#39;, file.raw); await axios.post(&#39;/api/upload&#39;, formData,{ headers: {&#39;Content-Type&#39;: &#39;multipart/form-data&#39;} }); ElMessage.success("Upload succeeded"); }catch(error){ console.error(error.message); ElMessage.error(`Failed to upload ${error.message}`); }finally{ // Clear files after submission regardless of success or failure. fileList.splice(0,fileList.length); } } function handleChange(){ // Handle change events as needed... } </script> ``` 这种方法给予开发者更大的灵活性去定制化交互体验,并且更容易调试和维护。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值