vue如何excel表格上传功能
Vue + iView实现Excel上传功能的完整代码1、HTML部分
<Col span="2">上传文件:</Col> <Col span="22" class="uploadExcelBox"> <Upload ref="uploadExcel" :loading="uploadLoading" :action="uploadFileUrl" accept="xlsx,xls" :format="uploadFormat" :before-upload="beforeImgFile" :on-success="successImgFile" :on-error="errorImgFile" :show-upload-list="true"> <Button type="success">上传附件</Button> </Upload> <li v-if="uploadingFile !== null">待上传文件: <span class="blueFont">{{ fileName }}</span> <Button @click="uploadFun(index)" :loading="loadingStatus" class="manualUploadBtn">{{ loadingStatus ? '上传中...' : '点击开始上传' }}</Button> </li> </Col>
2、JS部分
<script> // import excel from '@/libs/excel' import service from '@/libs/request' //用来取当前域名 import reportFormApi from '@/api/reportForm' export default { data() { return { uploadLoading:false,//上传控件loading状态 uploadFileUrl: "", uploadFormat:['xlsx','xls'], uploadingFile:null,//待上传的文件 loadingStatus:false,//upload组件的状态 fileName:"",//待上传文件的名称 } }, mounted() { this.uploadFileUrl = service.apiUrl + "/qingximaster/winInfo/execlAdd";//上传Excel的接口路径,后端人员提供。 }, methods: { // 图片上传之前 beforeImgFile(file) { // console.log(file); const fileExt = file.name.split('.').pop().toLocaleLowerCase() if (fileExt === 'xlsx' || fileExt === 'xls') { var formdata = new FormData(); formdata.append("file",file); this.fileName = formdata.get('file').name;//通过formdata.get('file')方法,可以取file文件里的信息,例如Excel的文件名。 this.uploadingFile = formdata;//注意:这个将作为参数传给接口实现上传。传给接口的file不需要 formdata.get('file'),直接传file。 } else { this.$Notice.warning({ title: '文件类型错误', desc: '文件:' + file.name + '不是EXCEL文件,请选择后缀为.xlsx或者.xls的EXCEL文件。' }) } return false }, // 上传成功 successImgFile(response, file, fileList) { this.$Notice.success({ title: '提示', desc: '上传成功!' }) }, // 上传失败 errorImgFile(error, file, fileList) { this.$Notice.success({ title: '提示', desc: '上传失败!' }) console.log(error); }, uploadFun(index){//调接口上传Excel this.loadingStatus = true; reportFormApi.uploadExcel({ url: this.uploadFileUrl, file: this.uploadingFile }).then(res =>{ this.uploadingFile = null; this.fileName = ""; if(res.code==0){ this.infoList[index].content = JSON.stri.jpg" alt="vue如何excel表格上传功能(Vue + iView实现Excel上传功能的完整代码)" border="0" />
3、页面效果如下
(1)进入页面默认展示的样子
(2)选中要上传的Excel
(3)“点击开始上传”之后
以上就是Vue + iView实现Excel上传的详细内容,更多关于vue iview excel上传的资料请关注开心学习网其它相关文章!