Shulou(Shulou.com)05/31 Report--

This article mainly explains "Vue+iView how to achieve Excel upload function", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "how to achieve Excel upload function with Vue+iView"!

1. HTML part

Upload files: upload attachments to upload files: {{fileName}} {{loadingStatus? 'uploading...': 'click to start uploading'}}

2. JS part

/ / import excel from'@ / libs/excel' import service from'@ / libs/request' / / is used to fetch 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,// status of the loadingStatus:false,//upload component of the file to be uploaded fileName: "", / / name of the file to be uploaded}} Mounted () {this.uploadFileUrl = service.apiUrl + "/ qingximaster/winInfo/execlAdd" / / the API path for uploading Excel, which is provided by backend personnel. }, methods: {/ / beforeImgFile (file) {/ / console.log (file) before picture upload 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;// can take the information in the file file, such as the file name of the Excel, through the formdata.get (' file') method. This.uploadingFile = formdata;// Note: this will be passed as a parameter to the API for upload. The file passed to the interface does not need formdata.get ('file'), but is passed directly to file. } else {this.$Notice.warning ({title: 'file type error', desc: 'file:' + file.name +'is not an EXCEL file, please select an EXCEL file with the suffix .xlsx or .xls. })} return false}, / / successfully uploaded successImgFile (response, file, fileList) {this.$Notice.success ({title: 'prompt') Desc: 'upload succeeded!' })}, / / upload failed errorImgFile (error, file, fileList) {this.$Notice.success ({title: 'prompt', desc: 'upload failed!' }) console.log (error);}, uploadFun (index) {/ / upload Excel this.loadingStatus = true via API upload 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 })},}} at this point, I believe you have a deeper understanding of "how to achieve Excel upload function in Vue+iView". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.