最近使用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){ //上传失败 },