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

How to insert Emoji expressions into MySQL

Preface Today, when I was designing a feedback fo...

MySQL master-slave replication principle and points to note

Written in front I have been writing a special to...

HTML table markup tutorial (9): cell spacing attribute CELLSPACING

A certain distance can be set between cells in a ...

Vue implements multiple ideas for theme switching

Table of contents Dynamically change themes The f...

MySQL series 6 users and authorization

Table of contents Tutorial Series 1. User Managem...

Metadata Extraction Example Analysis of MySQL and Oracle

Table of contents Preface What is metadata Refere...

Detailed explanation of Nginx log customization and enabling log buffer

Preface If you want to count the source of websit...

Detailed steps for yum configuration of nginx reverse proxy

Part.0 Background The company's intranet serv...

Some basic instructions of docker

Table of contents Some basic instructions 1. Chec...

Several reasons for not compressing HTML

The reason is simple: In HTML documents, multiple ...

Three notification bar scrolling effects implemented with pure CSS

Preface The notification bar component is a relat...

Beginners learn some HTML tags (3)

Beginners who are exposed to HTML learn some HTML...

Detailed explanation of MySQL index selection and optimization

Table of contents Index Model B+Tree Index select...

HTML insert image example (html add image)

Inserting images into HTML requires HTML tags to ...

Solution for converting to inline styles in CSS (css-inline)

Talk about the scene Send Email Embedding HTML in...