el-upload通过new FormData()上传带参数的图片

1.一定要包含头文件

'Content-Type': 'multipart/form-data'

2.formData数据和普通参数不能同时传递,否则会报错,并且后端上传图片的接口debug进不来,如果同时要上传图片和对应的id,要把id也写进formData数据中

let fd = new FormData()
fd.append('file', val.file)
fd.append('id', this.id)

3.formData数据之间打印的话是空的,可以通过get来打印formData的数据

console.log(fd.get('file'))

console.log(fd.get('id'))

4.图片上传之后上传按钮消失,如图

上传之前:

上传之后:

解决方法:要设置el-upload属性,:file-list="fileList" ,fileList是一个空的list,每次上传图片之前记得清空,show-file-list属性要设置为true(默认就是true)

这样上传之后就是:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用el-upload组件获取文件的FormData,你可以通过配置`before-upload`属性来实现。以下是一个示例代码: ```html <template> <el-upload class="upload-demo" action="/your-upload-url" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccess" :on-error="handleUploadError" > <el-button size="small" type="primary">点击上传</el-button> </el-upload> </template> <script> export default { methods: { handleBeforeUpload(file) { const formData = new FormData(); formData.append('file', file); // 这里可以添加其他的表单字段,例如: // formData.append('name', 'John Doe'); // formData.append('age', 30); return formData; }, handleUploadSuccess(response) { console.log(response); // 处理上传成功的逻辑 }, handleUploadError(error) { console.error(error); // 处理上传失败的逻辑 } } } </script> ``` 在`handleBeforeUpload`方法中,我们创建了一个新的FormData对象,并使用`append`方法将文件添加到其中。如果你还需要上传其他表单字段,可以继续使用`append`方法添加。 注意,`before-upload`方法需要返回一个FormData对象,它将被用于实际的文件上传请求。在这个示例中,上传请求将发送到`/your-upload-url`。你需要将其替换为你自己的上传URL。 当文件上传成功时,`handleUploadSuccess`方法将被调用,并传递响应数据作为参数。类似地,如果上传失败,`handleUploadError`方法将被调用,并传递错误对象作为参数。你可以根据需要在这些方法中编写逻辑来处理上传结果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值