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>
     <div v-if="uploadingFile !== null">待上傳檔案：
          <span class="blueFont">{{ fileName }}</span>
          <Button @click="uploadFun(index)" :loading="loadingStatus" class="manualUploadBtn">{{ loadingStatus ? '上傳中...' : '點選開始上傳' }}</Button>
      </div>
</Col>

2、js部分

&lFXGqHtYNIt;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,//待上傳的檔案
        http://www.cppcns.com
 
        loadingStatus:false,//upload元件的狀態
                fileName:"",//待上傳檔案的名稱
            }
        },mounted() {
            this.uploadFileUrl = service.apiUrl + "/qingximaster/winInfo/execlAdd";//上傳Excel的介面路徑，後端人員提供。
        },methods: {
			// 圖片上傳之前
			beforeImgFile(file) {
				// console.log(file);
				const fileExwww.cppcns.com
 
t = 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檔案裡的資訊http://www.cppcns.com，例如Excel的檔名。
					this.uploadingFile =  formdata;//注意：這個將作為引數傳給介面實現上傳。傳給介面的filwww.cppcns.come不需要 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,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.stringify(res.data);
					    // console.log(this.infoList[index].content);
                        this.$Message.success("上傳成功！");
                    }else{
                        this.$Message.error(res.message);
                    }
				}).finally(()=>{
					this.loadingStatus = false;
                    this.uploadLoading = false;
                })
			},}
    }

3、頁面效果如下

（1）進入頁面預設展示的樣子

（2）選中要上傳的Excel

（3）“點選開始上傳”之後

以上就是vue + iView實現Excel上傳的詳細內容，更多關於vue iview excel上傳的資料請關注我們其它相關文章！