多个 upload 上传文件 代码直接复制不可用主要是 注释对应的思路
<template>
<el-upload
class="upload-demo"
:action="action" //此处不需要调用 删除后element会报错 所以保留了
:auto-upload="false" //不让文件自动上传
:on-change="beforeupload" //关键内容
:limit="1" //下面内容参考element 官网
:file-list="fileList"
ref="fileipa"
accept=".ipa"
:on-exceed="handleExceedIpa"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
<div>将文件拖到此处,或<em>点击上传</em></div>
</div>
</el-upload>
<el-upload
:action="action"
list-type="picture-card"
multiple
:limit="5"
ref="uploadIphone"
:on-change="beforeupload1"//关键
:file-list="fileListIphone"
:on-exceed="handleExceedIphone"
:auto-upload="false">
</el-upload>
</template>
<script>
export default {
data() {
return {
uploadForm: new FormData(),
action:'test',
id:''
}
},
methods:{
//如需要其他条件 自行参考官网
beforeupload(file){
this.uploadForm.append("ipafile",file.raw);
},
//依次类推其他
beforeupload1(file){
this.uploadForm.append("ipafile",file.raw);
},
sure(){
//其它参数
this.uploadForm.append('id', this.id)
axios({
method:'POST',
url:'/test',
data:this.uploadForm,
headers:{
'Content-Type':'multipart/form-data' //值得注意的是,这个地方一定要把请求头更改一下
}
}).then(res=>{
//请求试过 封装好的axios 异步但是 一直返回错误 (目前没有定位到具体原因有大佬的话可以指出问题)
console.log(res)
})
}
}
}
</script>
下面是原生
html
<input type="file" @change="handleFileChange" ref="inputer" />
<input type="file" @change="handleFileChange1" ref="inputer1" />
<button id="btn">确认</button>
js
var formData=new FormData();
handleFileChange function(){
let inputDOM = this.$refs.inputer;
let file = inputDOM.files[0];// 通过DOM取文件数据
formData.append("posterImg",file);
}
handleFileChange1 function(){
let inputDOM = this.$refs.inputer1;
let file = inputDOM.files[0];// 通过DOM取文件数据
formData.append("posterImg",file);
}
最后通过点击事件 传递 请求参考上面