elementui中使用input原生上传文件功能并提交到接口

需求:表单中直接使用input进行文件上传,并直接传到后端表单接口

 

出现的问题:

1.全局接口配置的请求头是application/json,要传formData需要修改请求头(不可能,绝对不可能)

2.后端不单独对文件进行储存,因此无法使用独立封装的上传组件

 

解决方案:file转base64编码,然后通过JSON格式发送给服务器。

 

代码实现:

1
2
3
4
5
6
7
8
9
const fileInput = document.querySelector("#file");
const file = fileInput.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
const that = this;
reader.onload = (e) => {
  params.file = e.target.result; // 转化后的base64字符串
  that.fetchSubmit(params);
};

  

动态表单组件里需要补充input的file相关属性内容:

 

后端解码后乱码问题可参照:

https://www.php.cn/faq/526560.html

posted @   芝麻小仙女  阅读(99)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
点击右上角即可分享
微信分享提示