elementuiplus附件上传

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>