Complete code of Vue + iView to realize Excel upload function

Complete code of Vue + iView to realize Excel upload function

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:
  • Detailed explanation of Vue ElementUI manually uploading excel files to the server
  • Vue excel upload preview and table content download to excel file
  • Two ways to implement Excel file upload and download functions in Vue
  • Use Vue+Spring Boot to implement Excel upload function
  • Manual upload function of vue iView upload component

<<:  Mysql master/slave database synchronization configuration and common errors

>>:  How to prevent computer slowdown when WIN10 has multiple databases installed

Recommend

Solution to forgetting mysql password under linux

The problem is as follows: I entered the command ...

How to improve Idea startup speed and solve Tomcat log garbled characters

Table of contents Preface Idea startup speed Tomc...

MySQL deep paging (how to quickly paginate tens of millions of data)

Table of contents Preface Case optimization summa...

How to implement JavaScript's new operator yourself

Table of contents Constructor new Operator Implem...

How to solve the problem that Seata cannot use MySQL 8 version

Possible reasons: The main reason why Seata does ...

50 lines of code to implement Webpack component usage statistics

background Recently, a leader wanted us to build ...

Solution to the problem of web page flash animation not displaying

<br />The solution steps are as follows: Sta...

MySQL query learning basic query operations

Preface MySQL is the most popular relational data...

JavaScript pre-analysis, object details

Table of contents 1. Pre-analysis 1. Variable pre...

Sample code for seamless scrolling with flex layout

This article mainly introduces the sample code of...

An article teaches you to write clean JavaScript code

Table of contents 1. Variables Use meaningful nam...

Tips for designing photo preview navigation on web pages

<br />Navigation does not just refer to the ...