最近使用element-ui做了一次上傳,element-ui上傳是單個文件上傳,每上傳一個文件就請求一次ajax
代碼如下
<el-upload accept="doc" //允許上傳的文件類型 ref="upload" class="upload-demo" :show-file-list="true" //是否顯示上傳的文件列表 multiple //支持多選 name="files" //上傳文件的鍵名 :before-upload="beforeUpload" //上傳前的方法 :on-progress="onProgress" //上傳進度 :data="{token:token}" //上傳參數 :on-error="error" :before-remove="beforeRemove" //刪除文件前 :file-list="fileList" //文件列表 :on-success="uploadSuccess" //上傳成功 action="" //上傳地址
> <p >點擊此處添加你要上傳的文檔</p> <p>按住Ctrl可以選擇多篇上傳</p> </el-upload>
對應的方法如下:
//上傳前(每個文件上傳前必須要做某種操作時) beforeUpload(file){ return new Promise((resolve,reject)=>{ getToken().then(res=>{ this.token=res.data.data.access_token; return resolve(true) }).catch(()=>{ return reject(false); }) }); }, //上傳成功 uploadSuccess(response,file,fileList){ if(response.code==200){ //狀態碼為200時則上傳成功 }else{ //狀態碼不是200時上傳失敗 從列表中刪除 fileList.splice(fileList.indexOf(file),1); } }, //禁止刪除 beforeRemove(){ return false; }, error(response, file, fileList){ //上傳失敗 },