很多新手对于如何分析element-ui中上传组件传输的文件和其他参数不是很清楚。为了帮助大家解决这个问题，下面小编就详细讲解一下。需要的人可以从中学习，希望你能有所收获。
最近，这个项目使用了vuethink，它集成了element-ui。以前，它使用bootstrap框架，对js知之甚少。然后，它也用了vue.js，但是不透明。然后，它用各种入坑。
下面我们来分析一下我在使用element-ui时遇到的问题和解决方法。
首先，在element-ui的官网上有一个上传组件的简单介绍。
El-上传
class=’上传-演示’
action=’https://jsonplaceholder .打字码.com/post/’
:on-preview=’handlePreview ‘
:on-remove=’handleRemove ‘
:文件列表=’文件列表’
El-button size=’ small ‘ type=’ primary ‘单击上传/el-button。
div slot=’ tip ‘ class=’ El-upload _ _ tip ‘只能上传jpg/png文件，不超过500kb/div。
/El-upload
实际上，上传是将输入类型=’file ‘封装在几层样式中。
00-1010我首先不明白的是url在起作用。我在后台使用PHP语言。根据我后来的理解，这个url其实就是你的PHP使用的上传函数，就像表单中的动作一样。不同的是，我已经很久没有发现是否可以修改默认的投递方式了。
00-101
一 action url
是传递PHP提供的url最直接的方式，但是因为动作是在post模式下，而我在PHP后台使用的restful模式下的url，所以post模式无法传递引用。我尝试了好几种方法都没有成功，不知道怎么改成get模式。
第一种选择只能放弃。
00-1010放弃行动。在查找了大量的信息之后，我们发现可以用pre-upload属性代替action，这是一个函数类型属性。默认参数是当前文件，只要能传输这个文件就能达到效果。
要通过这个方法，您需要一个新的formdata对象，然后将键和值附加到这个对象，类似于postman测试。
网上有人给出的具体例子几乎如下。
上传前(文件){ 0
letfd=newFormData()
fd.append(‘key ‘，file，fileName)
axios.post(url，fd。{
//做点什么
})
True//false表示不会自动上传。我后来试了一下，发现都是一样的，不会自动上传。
}，这种感觉可以试一试，然后我很自然地记下了方式。
上传前
;(file,id) {
let fd = new FormData()
fd.append('key', file, fileName)
axios.post(url, fd. {
data：{
id:id
}
})
return false // false就是不自动上传，我后来试了发现都一样，都不会自动上传
},
然后我发现无论怎么样我都只能传过去id，在PHP代码中dump(_FLIES)永远是NULL，这就非常火大了，查了好久没有解决方法，之后发现我用的Content-Type应该是multipart/form-data，而f12中调试页面是application/json; charset=utf-8，我就觉得是不是这个的问题，于是在代码中又加了headers
beforeUpload (file,id) {
let fd = new FormData()
fd.append('key', file, fileName)
axios.post(url, fd. {
data：{
id:id
},
headers: {
'Content-Type': 'multipart/form-data'
}
})
return false // false就是不自动上传，我后来试了发现都一样，都不会自动上传
},
这次报的错是axios Missing boundary in multipart/form-data，没有边界，很头疼无语
后来发现Content-Type是自动识别然后加边界的，也有人说要把Content-Type定义为undefined，还是不行，只是自动识别Content-Type，
再后来发现原来传递formdata和data不能一起传递，要传递formdata就不能有data，所以要改为
beforeUpload (file,id) {
let fd = new FormData()
fd.append('file', file)
fd.append('id',id)
axios.post(url, fd, {
})
return false // false就是不自动上传，我后来试了发现都一样，都不会自动上传
},
这样就可以了
以下是我的代码
<el-upload class="upload-demo"
drag
action="123"
:before-upload="beforeUpload"
multiple
ref="newupload"
:auto-upload="false"
accept=".mp4,.flv,.mov"
:on-change="newhandleChange"
:on-success="newhandlesuccess">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em> </div>
<div class="el-upload__tip" slot="tip">请注意您只能上传.mp4 .flv .mov格式的视频文件</div>
</el-upload>
el-button type="primary" @click="newSubmitForm()" class="yes-btn">
确 定
</el-button>
<el-button @click="resetForm('newform')">
重 置
</el-button>
beforeUpload (file) {
console.log(file)
let fd = new FormData()
fd.append('file', file)
fd.append('groupId', this.groupId)
// console.log(fd)
newVideo(fd).then(res => {
console.log(res)
})
return true
},
newSubmitForm () {
this.$refs.newupload.submit()
},
export function newVideo (data) {
return axios({
method: 'post',
url: 'http://localhost:8086/Platform1-back-end/public/admin/VideoBase/newVideo',
timeout: 20000,
data: data
})
}
我是把axios集中放在一个文件，与vue文件分离了，其实都差不多
还有就是action中随便加一个东西会有404错误，但是不影响最终效果，介意的可以看看有什么方法去除
方案三 分多次传值
方案二成功了就没有试，不过也没有意义了不方便
看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注行业资讯频道，感谢您对的支持。
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/78643.html