1. HTML part <Col span="2">Upload file:</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">Upload attachment</Button> </Upload> <div v-if="uploadingFile !== null">File to be uploaded: <span class="blueFont">{{ fileName }}</span> <Button @click="uploadFun(index)" :loading="loadingStatus" class="manualUploadBtn">{{ loadingStatus ? 'Uploading...' : 'Click to start uploading' }}</Button> </div> </Col> 2. JS part <script> // import excel from '@/libs/excel' import service from '@/libs/request' //Used to get the current domain name import reportFormApi from '@/api/reportForm' export default { data() { return { uploadLoading:false, //Upload control loading status uploadFileUrl: "", uploadFormat:['xlsx','xls'], uploadingFile:null, //File to be uploaded loadingStatus:false, //Status of upload component fileName:"", //Name of the file to be uploaded} }, mounted() { this.uploadFileUrl = service.apiUrl + "/qingximaster/winInfo/execlAdd"; //Interface path for uploading Excel, provided by backend personnel. }, methods: { // Before uploading the image 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; //Through the formdata.get('file') method, you can get the information in the file, such as the Excel file name. this.uploadingFile = formdata; //Note: This will be passed as a parameter to the interface to upload. The file passed to the interface does not need formdata.get('file'), just pass the file directly. } else { this.$Notice.warning({ title: 'File type error', desc: 'File:' + file.name + 'Not an EXCEL file, please select an EXCEL file with the suffix .xlsx or .xls. ' }) } return false }, // Upload successfully successImgFile(response, file, fileList) { this.$Notice.success({ title: 'Tips', desc: 'Upload successful! ' }) }, // Upload failed errorImgFile(error, file, fileList) { this.$Notice.success({ title: 'Tips', desc: 'Upload failed! ' }) console.log(error); }, uploadFun(index){//Call interface to upload 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.stringify(res.data); // console.log(this.infoList[index].content); this.$Message.success("Upload successful!"); }else{ this.$Message.error(res.message); } }).finally(()=>{ this.loadingStatus = false; this.uploadLoading = false; }) }, } } 3. The page effect is as follows (1) The default appearance of the page (2) Select the Excel file to be uploaded (3) After clicking “Start Uploading” The above is the details of Vue + iView to realize Excel upload. For more information about vue iview excel upload, please pay attention to other related articles on 123WORDPRESS.COM! You may also be interested in:
|
<<: Mysql master/slave database synchronization configuration and common errors
>>: How to prevent computer slowdown when WIN10 has multiple databases installed
The problem is as follows: I entered the command ...
Table of contents Preface Idea startup speed Tomc...
Table of contents Preface Case optimization summa...
I wrote a jsp page today. I tried to adjust <di...
Table of contents Constructor new Operator Implem...
Possible reasons: The main reason why Seata does ...
background Recently, a leader wanted us to build ...
<br />The solution steps are as follows: Sta...
Preface MySQL is the most popular relational data...
Table of contents 1. Pre-analysis 1. Variable pre...
The isnull() function cannot be used as a substit...
This article mainly introduces the sample code of...
Table of contents 1. Variables Use meaningful nam...
This article is mysql database Question 1 Import ...
<br />Navigation does not just refer to the ...