elementui的el-form和el-upload上传文件和表单数据

最新推荐文章于 2025-06-30 14:43:42 发布

酒醉的胡铁

最新推荐文章于 2025-06-30 14:43:42 发布

阅读量1.4w

点赞数 8

CC 4.0 BY-SA版权

分类专栏：前端文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/weixin_43691884/article/details/135193743

前端专栏收录该内容

5 篇文章

订阅专栏

文章讲述了如何在Vue3应用中使用ElementUI3版本的上传组件进行文件上传，包括异步上传到OSS、自定义HTTP请求、处理formData并与Java后台交互的过程。

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

问题

需要将一大推的数据和文件传到后台，网上看了很多例子都说的不明白，自己研究了下

但是一般大厂都是先异步上传图片到oss返回url在提交表单

在这里插入图片描述
文件上传用到的组件是elementui vue3版本elementui

安装和引入依赖看官方文档，下面只讲具体使用

这是表单中文件上传的部分只列出自己重写的注释

<n-form-item label='文件上传'>
  <el-upload
    v-model:file-list='fileList'       #用于展示缩略的list
    ref='uploadRef'                    #定义一个标识
    :limit='1'
    class='upload-demo'
    :auto-upload='false'                 #禁止它自动提交
    :http-request='uploadFile'           #在触发submit后会触发此方法 将文件塞入表单中
    :multiple='false'
  >
    <template #trigger>
      <el-button type='primary'>导入文件</el-button>
    </template>

    <template #tip>
      <div class='el-upload__tip'>
        jpg/png files with a size less than 500kb
      </div>
    </template>
  </el-upload>
</n-form-item>

const formDatas = new FormData();      #传到后台必须是表单类型

const uploadRef = ref<UploadInstance>();  #用它触发submit()


function uploadFile(param) {
  formDatas.append('disFile', (param.file));  #绑定:http-request 会在submit触发
}

const fileList = ref<UploadUserFile[]>([]);  #展示缩略图的list

在使用框架封装好的http请求工具无法传输表单类型的数据，于是自己又引入了一个 axios

#await是等待提交完事后 在进行下面的操作 不然有可能拿不到
#提交完后会触发uploadFile 咱们封装好的方法 已经将文件塞入到表单里了
await uploadRef.value.submit(); 


#遍历原有表单的非文件数据 插入到 formData里
Object.keys(formValueScopy.value).forEach(key=>{
  formDatas.append(key,formValueScopy.value[key])
});


var config = {
  method: 'post',
  url: 'URL地址',
  data : formDatas
};
axios(config)
  .then(function (response) {
    console.log(JSON.stringify(response.data));
  })
  .catch(function (error) {
    console.log(error);
  });

JAVA后台代码

就是正常的接口文件用这个接收即可

//disFile对应上面表单里的key
private MultipartFile disFile;

注意：实例化一个formData对象,使用append()方法将数据添加到对象中
formData里面存储的数据形式，一对key/value组成一条数据，key是唯一的，一个key可能对应多个value

key	value
file	name
form	[name1,name2,name3]

使用append()方法，如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾无法直接打印实例化出来的对象 formDatas,要使用get()或getAll()

formData.get("form"); // 获取key为form的第一个值
formData.getAll("file"); // 返回一个数组，获取key为file的所有值