後臺管理項目,用到的是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,值就是你選擇的文件 ,這樣就實現了立即上傳.