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
Preface Today, when I was designing a feedback fo...
Written in front I have been writing a special to...
A certain distance can be set between cells in a ...
Table of contents Dynamically change themes The f...
Table of contents Tutorial Series 1. User Managem...
Table of contents Preface What is metadata Refere...
Preface If you want to count the source of websit...
Part.0 Background The company's intranet serv...
Table of contents Some basic instructions 1. Chec...
The reason is simple: In HTML documents, multiple ...
Preface The notification bar component is a relat...
Beginners who are exposed to HTML learn some HTML...
Table of contents Index Model B+Tree Index select...
Inserting images into HTML requires HTML tags to ...
Talk about the scene Send Email Embedding HTML in...