<template>
<el-form>
<el-form-item label="姓名" prop="name">
<el-input v-model="name"></el-input>
</el-form-item>
<el-form-item>
<el-upload ref="upfile"
style="display: inline"
:auto-upload="false"
:on-change="handleChange"
:file-list="fileList"
action="#">
<el-button type="success">选择文件</el-button>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="success" @click="upload">点击上传</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
name:'UploadUi',
data(){
return{
name:'',
fileList:[]
}
},
methods:{
//通过onchanne触发方法获得文件列表
handleChange(file, fileList) {
this.fileList = fileList;
console.log(fileList)
},
upload(){
let fd = new FormData();
fd.append("name",this.name);
this.fileList.forEach(item=>{
//文件信息中raw才是真的文件
fd.append("files",item.raw);
//console.log(item.raw)
})
this.$axios.post('/uploadUi',fd).then(res=>{
if (res.data.code === 200) {
//console.log(res);
this.$message('上传成功')
}else{
this.$message('失败')
}
})
},
}
}
</script>
vue使用el-upload实现文件手动上传功能和自定义上传文件参数名
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 最近项目中涉及很多文件上传的地方，然后文件上传又有很多限制。比如文件大小限制，文件个数限制，文件类型限制，文件上传...
- 一、el-upload手动上传后台接口 手动上传后台接口的核心步骤是1.设置:auto-upload="false...
- 在使用<el-upload>上传完文件后，当跳转到其他页面再返回时，已上传的文件由于页面重新刷新是不存在的，如果要...
