elementuiplus附件上传

Study123wf

已于 2023-11-27 11:35:58 修改

阅读量775

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue Js 文章标签： vue.js javascript typescript

于 2022-03-17 14:19:20 首次发布

本文链接：https://blog.youkuaiyun.com/Study123wf/article/details/123549191

Vue 同时被 2 个专栏收录

17 篇文章

订阅专栏

13 篇文章

订阅专栏

本文详细介绍了如何在ElementUIPlus中使用手动上传附件的方法，包括设置`Content-Type`为`multipart/form-data`，禁用自动上传并提供`handleFileChange`处理函数。遇到上传问题，请务必先确认后端配置。关键步骤包括创建`newFormData`对象并附参数，同时提醒了文件类型验证和v-model绑定的注意事项。

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

elementuiPlus附件上传方式:
一:自动上传:
自动上传只需按照文档操作即可

二：手动上传:
注意:下面的手动上传方式一定是正确的，前端正确执行以下步骤之后如果上传不成功，请找后端，不成功必定是后端怀疑
坚定点请不要怀疑自己错了，否则你会浪费很多联调时间
三步走:

步骤一:手动提交headers一定是multipart/form-data格式
headers: {
‘Content-Type’: ‘multipart/form-data’,
},

步骤二:
:auto-upload=“false” 必须设置为false
:on-change=“handleFileChange” handleFileChange方法获取提交的数据

步骤三:
(1)创建new FormData 对象
(2)通过append方法提交参数

/*添加对账附件*/
const addAttachment = (params: any) => {
  return request({
    url: '/admin/financeAttachment/importAttachment.do',
    method: 'POST',
    data: params,
    headers: {
      'Content-Type': 'multipart/form-data',
    },
  })
}


<el-upload
            style="width: 100%"
            ref="uploadRef"
            :limit="1"
            :on-change="handleFileChange"
            v-model:file-list="dataForm.fileList"
            accept=".xlsx, .xls"
            :auto-upload="false"
            class="uploadFile"
            :disabled="dataForm.id == '' ? false : true"
          >
            <el-button
              size="middle"
              type="primary"
              v-if="dataForm.id == ''"
              style="margin-top: -105px"
              >点击上传</el-button
            >
          </el-upload>


  const handleFileChange = (file, fileList) => {
    console.log(file, fileList, 'fileList===')
    const isExcel =
      file.raw.type === 'application/vnd.ms-excel' ||
      file.raw.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    if (!isExcel) {
      uploadRef.value?.clearFiles()
      return ElMessage.error('附件不是Excel文档，请重新上传')
    }

    let filename = file.name.substring(0, file.name.lastIndexOf('.'))
    if (filename.length > 30) {
      fileList.value = []
      uploadRef.value?.clearFiles()
      return ElMessage.error('附件的文件名不能超30字，请重新上传')
    }
    uploadFile.value = file
    dataForm.fileList = [
      {
        name: file.name,
        url: '',
      },
    ]

    console.log(uploadFile.value, 'filename===', file.raw)
  }
 清空附件通过调取方法 因为手动赋值为空是不生效的
 
 uploadRef.value?.clearFiles()
-----------------------------------------------------------------------------------------------------------------------
提交
1:new FormData()
2:通过append方法插入参数

const onSubmitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    let formData = new FormData()
    let dataObj = {
      checkDate: dataForm.checkDate,
      endDate: dataForm.endDate,
      remark: dataForm.remark,
      deadline: dataForm.deadline,
      fileType: dataForm.type,
      fileTypeName: uploadForm.data.name,
    }
    // classifyLists.value.find((item) => item.dicCode == dataForm.type).dicValue
    formData.append('file', uploadFile.value.raw)
    formData.append('checkDate', dataForm.checkDate)
    formData.append('endDate', dataForm.endDate)
    formData.append('deadline', dataForm.deadline)
    formData.append('fileType', dataForm.type)
})

补充:附件必传的校验易错点:将v-model:file-list=""绑定在 el-form的v-model未包含的数组、

错误写法:
const fileList = ref([]) //


 v-model:file-list="fileList "

正确写法:
const dataForm = reactive({fileList：[]})	
 v-model:file-list="dataForm.fileList"
 
因为el-form绑定的v-model是dataForm 而非fileList 

<el-form size="large" ref="dataFormRef" :model="dataForm" :rules="rules" label-width="80px">
   
        <el-form-item label="附件" prop="fileList">
          <el-upload
            style="width: 100%"
            ref="uploadRef"
            :limit="1"
            :on-change="handleFileChange"
            v-model:file-list="dataForm.fileList"
            accept=".xlsx, .xls"
            :auto-upload="false"
            class="uploadFile"
            :disabled="dataForm.id == '' ? false : true"
          >
            <el-button
              size="middle"
              type="primary"
              v-if="dataForm.id == ''"
              style="margin-top: -105px"
              >点击上传</el-button
            >
          </el-upload>
        </el-form-item>
        </el-form>