共计 803 个字符，预计需要花费 3 分钟才能阅读完成。
后台管理项目, 用到的是 vue+elementUI 的方式,upload 板块,api 个人感觉还是不够详尽, 现在, 来说一下关于立即上传的问题. 主要用到的是 http-request 的覆盖原有上传方式,(因为我需要传 token 给后台), 所以 action 的值可以写为空串. 页面代码:
<el-upload
class=”upload-demo” name=”usersFile”
action=””
:on-preview=”handlePreview”
:http-request=”uploadFile”
:on-remove=”handleRemove”
:auto-upload=”true”
:on-exceed=”handleExceed”
:file-list=”fileList”>
<el-button size=”mini” type=”primary”> 批量上传 </el-button>
</el-upload>
可以看到,http-request 对应的方法 uploadFile 是重点:
uploadFile(file){
let formDatas = new FormData();
formDatas.append(‘usersFile’, file.file);
formDatas.append(‘tokenId’,this.$store.state.user.tokenId);
this.$post(‘/yourUrl’,formDatas).then(res =>{
if(res.code == 0){
this.$message({
message: res.msg,
type: ‘success’
});
}else{
this.$message({
message: res.msg?res.msg:’ 操作失败 ’,
type: ‘error’
});
}
})
},
说明: 其中字段 usersFile 就是后台要的 key, 值就是你选择的文件 , 这样就实现了立即上传.