介绍
如何解析element-ui中上传组件传递文件及其他参数的问题,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
最近项目用到了vuethink,里面集成了element-ui,之前一直用的是引导框架,对js也是一知半解,然后也用过vue。js,但也是学的不通透的,然后就各种入坑。
下面就分析一下我使用element-ui遇到的问题以及解决方法吧。
首先在element-ui的官网里有对上传组件的简单的介绍
& lt; el-upload
类,,=皍pload-demo"
,,action=癶ttps://jsonplaceholder.typicode.com/posts/"
,,:on-preview=癶andlePreview"
,,:“移动”=癶andleRemove"
,,:文件列表=癴ileList"比;
,,& lt; el-button 大?皊mall",类型=皃rimary"在点击上传& lt;/el-button>
,,& lt; div 槽=皌ip",类=癳l-upload__tip"祝辞只能上传jpg和png文件,且不超过500 kb
& lt;/el-upload>
其实上传就是对输入类型=癴ile"做了几层样式封装
一动作url
我第一个不理解的就是行动中的url,我后台使用的是PHP语言,根据我之后的理解,这个url其实就是你PHP使用的上传的函数,就和形式中行动的一样,不一样的是我找了好久也没发现是否能修改默认的帖子传递方式
二文件接收的同时,传递其他参数
方案一url传参
对PHP提供的url进行传参,这是最直接能想到的方式,但是因为行动中是发布方式的,而PHP后台我使用的基于rest的方式的url,发布方式无法实现传参,我试了好几种都没能成功,也不知道要如何改成得到方式
第一种方案只能放弃
方案二不使用行动
放弃行动,在找了好多资料后发现可以不使用行动,而是用before-upload属性,这是一个功能类型的属性,默认参数是当前文件,只要能传递这个文件也能实现效果
要传递这个方法就需要新的一个formdata对象,然后对这个对象追加键和值,类似于邮差测试时那样
具体网上有人给的例子,差不多如下
beforeUpload (文件),{
,,,,,let fd =, new FormData ()
,,,,,fd.append(& # 39;关键# 39;,,文件,文件名)
,,,,,axios.post (url, fd只{
,,,,,,,//做一些操作
,,,,,})
,,,,,return false //,假的就是不自动上传,我后来试了发现都一样,都不会自动上传
,,,}, 这个感觉可以一试,然后我理所当然的写了一下的方式
beforeUpload (文件,id), {
,,,,,let fd =, new FormData ()
,,,,,fd.append(& # 39;关键# 39;,,文件,文件名)
,,,,,axios.post (url, fd只{
,,,,,,,数据:{
,,,,,,,,id: id
,,,,,,,}
,,,,,})
,,,,,return false //,假的就是不自动上传,我后来试了发现都一样,都不会自动上传
,,,}, 然后我发现无论怎么样我都只能传过去id,在PHP代码中转储(_FLIES)永远是NULL,这就非常火大了,查了好久没有解决方法,之后发现我用的内容类型应该是多部分/格式,而f12中调试页面是application/json;charset=utf - 8,我就觉得是不是这个的问题,于是在代码中又加了标题
beforeUpload (文件,id), {
,,,,,,,let fd =, new FormData ()
,,,,,,,fd.append(& # 39;关键# 39;,,文件,文件名)
,,,,,,,axios.post (url, fd只{
,,,,,,,,,数据:{
,,,,,,,,,,id: id
,,,,,,,,,},
,,,,,,,,,头:,{
,,,,,,,,,,& # 39;内容类型# 39;:,& # 39;多部分/格式# 39;
,,,,,,,,,}
,,,,,,,})
,,,,,,,return false //,假的就是不自动上传,我后来试了发现都一样,都不会自动上传
,,,,}, 这次报的错是axios丢失边界在多部分/格式,没有边界,很头疼无语
后来发现内容类型是自动识别然后加边界的,也有人说要把内容类型定义为定义,还是不行,只是自动识别- type,
再后来发现原来传递formdata和数据不能一起传递,要传递formdata就不能有数据,所以要改为
beforeUpload (文件,id), {
,,,let fd =, new FormData ()
,,,fd.append(& # 39;文件# 39;,,文件)
,,,fd.append (& # 39; id # 39; id)
,,,axios.post (url, fd,, {
,,,})
,,,return false //,假的就是不自动上传,我后来试了发现都一样,都不会自动上传
},
