Vue+iView 엑셀 업로드 기능 의 전체 코드 구현

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 부분

<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,//      
                loadingStatus:false,//upload     
                fileName:"",//        
            }
        },
        mounted() {
            this.uploadFileUrl = service.apiUrl + "/qingximaster/winInfo/execlAdd";//  Excel     ,      。
        },
        methods: {
			//       
			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;//  formdata.get('file')  ,   file      ,  Excel    。
					this.uploadingFile =  formdata;//  :               。     file    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, file, 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 가 엑셀 업로드 에 대한 상세 한 내용 입 니 다.vue iview 엑셀 업로드 에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 하 세 요!

좋은 웹페이지 즐겨찾기