後臺管理項目,用到的是vue+elementUI的方式,upload板塊,api我的感受仍是不夠詳盡,如今,來講一下關於當即上傳的問題.
主要用到的是http-request的覆蓋原有上傳方式,(由於我須要傳token給後臺),因此action的值能夠寫爲空串.
頁面代碼:vue
<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是重點:api
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,值就是你選擇的文件 ,這樣就實現了當即上傳.app