element plus 文件上传组件el-upload

最新推荐文章于 2025-06-07 03:44:12 发布

m0_70668322

最新推荐文章于 2025-06-07 03:44:12 发布

阅读量400

点赞数 3

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_70668322/article/details/148267737

1. 提交文件时，要将通过:on-change="handleFileChange"得到的file.raw给到formData，再将formData作为参数给到接口，若接口还需要其他参数，都addend到formData。（1，非另外赋值过的数据；2，赋值给formData的数据时file.raw，而非file）

        const formData = new FormData()
        // 将文件添加到 FormData 中
        if (uploadFileList.value[0].raw) {
            formData.append('file', uploadFileList.value[0].raw); // 直接取 raw
        }
        // 检查 FormData 内容的方法
        // for (let [key, value] of formData.entries()) {
        //     console.log('formData', key, value);
        // }
        // 添加其他常量参数
        formData.append('certType', showfile.value);
        formData.append('certName', file_title.desc);

2.限制文件提交数量为1 :limit="1"，要多次提交，且名字相同的文件，注意：每次提交完要清理空间，（1，组件自带的文件缓存空间ref="uploadRef"；uploadRef.value.clearFiles()；2，提交文件的数组 uploadFileList.value = []）

  <el-upload 
ref="uploadRef" 
class="upload-demo" 
:action="actionUrl" 
:limit="1"
:auto-upload="false" 
:before-upload="beforeUpload" 
:show-file-list="true"                      
 :on-change="handleFileChange">
 <el-button type="primary" style="float: right;">请选择扫描件</el-button>
  </el-upload>

const uploadRef = ref(null);


const handleFileChange = (file) => {
    console.log('handleFileChange')
    const uploadFile = file

    uploadFileList.value.push(uploadFile)
    console.log('uploadFileList', uploadFileList.value)

}
提交方法{
   uploadFileList.value = []
   uploadRef.value.clearFiles();
}