elementuiplus附件上传

原创

已于 2023-11-27 11:35:58 修改 · 857 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #typescript

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

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

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"

最低0.47元/天解锁文章