Explain Vue elementui manually upload Excel files to the server

Time:2021-12-6

summary

Specific demand scenarios are as follows:

After selecting an excel file, you need to manually upload the imported excel file to the background server and display the statistical results after successful import. There are also examples of manual upload on the official website. The address is passed in through action = “URL”, but the request needs to be configured in the actual project. The implementation method is described in detail below.

explain:

When uploading files to display statistical results, we provide two interfaces at the back end: first, call the file upload interface. After successful uploading, call the statistical result interface according to the mark returned by the back end.

Property settings

. Vue file

<el-row>
    <div>
        <el-upload ref="upload"
            accept=".xls,.xlsx"
            action="#"
            :auto-upload="false"
            :multiple="false"
            :file-list="fileList"
            :before-upload="beforeUpload"
            :http-request="uploadHttpRequest"
            :on-remove="fileRemove"
            :on-change="fileChange">
            < El button size = "small" type = "primary" > select File < / El button >
            < div slot = "tip" > only one XLS / xlsx file can be uploaded at a time, and it does not exceed 10m < / div >
        </el-upload>
    </div>
</el-row>
<el-row>
    < El button size = "small" @ Click = "closedialog" > cancel < / El button >
    < El button type = "primary" size = "small" @ Click = "submitupload" > upload < / El button >
    < El button type = "primary" size = "small" @ Click = "downloadres" > Download feedback results < / El button >
</el-row>

Of which:

  • Action: the uploaded address does not need too much attention, but it is not recommended to delete it. It can be replaced by an ordinary string
  • Auto upload: whether to upload automatically. It is set to false because it is uploaded manually
  • Multiple: whether multiple selections are supported. It is set to false here
  • File list: uploaded file list array
  • Before upload: the hook before uploading a file. The parameter is the uploaded file. You can judge the type and size of the uploaded file here
  • HTTP request: a custom upload method that overrides the default upload behavior (i.e. action = “URL”)
  • On remove: the method triggered when the uploaded file is removed
  • On Change: the method triggered when the upload file status (add, upload success or failure) changes

processing logic

The logic processing code is as follows:

methods: {
    //Hook before uploading file: judge the format and size of the uploaded file. If false is returned, the upload will be stopped
    beforeUpload(file) {
        //File type
        const isType = file.type === 'application/vnd.ms-excel'
        const isTypeComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        const fileType = isType || isTypeComputer
        if(!fileType) {
            This. $message. Error ('the uploaded file can only be in XLS / xlsx format! ')
        }

        //File size is limited to 10m
        const fileLimit = file.size / 1024 / 1024 < 10;
        if(!fileLimit) {
            This. $message. Error ('upload file size no more than 10m! ');
        }
        return fileType && fileLimit
    },
    //Customize the upload method. Param is the default parameter. You can get the file information. The specific information is shown in the figure below
    uploadHttpRequest(param) {
        Const formdata = new formdata() // formdata object. Adding parameters can only be added in the form of append ('key ', value)
        Formdata. Append ('File ', param. File) // add a file object
        formData.append('uploadType', this.rulesType)
        Const url = ` ${this. Mybaseurl} / operation / ruleimport / importdata ` // upload address
        axios.post(url, formData)
            .then( res => {
                const { data: { code, mark } } = res
                if(code === 0) {
                    Param. Onsuccess() // the uploaded file displays a green check mark
                    this.uploadMark = mark
                }
                Return this. Countdata (this. Uploadmark) // call the statistics result interface according to the mark value of the response, and return a promise for chain call
            })
            . then (RES = > {// chain call to count the response of the result
                const { data: { code, data } } = res
                if(code === 0) {
                    Console.log ('statistical results', data)
                }
            })
            .catch( err => {
                Console.log ('failed ', ERR)
                Param. Onerror() // files that fail to upload will be deleted from the file list
            })
    },
    //Statistical results
    countFile(mark) {
        return new Promise((resolve, reject) => {
            axios
                .get(`/operation/ruleImport/countData?mark=${mark}`)
                .then(res => {
                    resolve(res)
                })
                .catch(error => {
                    reject(error)
                })
        })
    },
    //Click upload: manually upload to the server, and the HTTP request of the component will be triggered
    submitUpload() {
        this.$refs.upload.submit()
    },
    //The file has changed
    fileChange(file, fileList) {
        if (fileList.length > 0) {
            This. Filelist = [filelist [filelist. Length - 1]] // show the last selected file
        }
    },
    //Remove selected files
    fileRemove(file, fileList) {
        if(fileList.length < 1) {
            This.uploaddisabled = true // if no file is selected, the upload button is disabled
        }
    },
    //Cancel
    closeDialog() {
        This. $refs. Upload. Clearfiles() // clear the uploaded file object
        This. Filelist = [] // clear the selected file list
        this.$emit('close', false)
    }
}

The param parameter of HTTP request, and the print result is shown in the figure. Get the current file object through param.file.

The above is a detailed explanation of Vue elementui‘s manual uploading of Excel files to the server. For more information about Vue elementui’s manual uploading of Excel files to the server, please pay attention to other relevant articles of developeppaer!

Recommended Today

The real problem of Alibaba IOS algorithm can’t hang up this time

More and more IOS developers continue to enter the peak of job hopping in 2020 Three main trends of interview in 2020: IOS bottom layer, algorithm, data structure and audio and video development Occupied the main battlefield. Data structure and algorithm interview, especially figure, has become the main reason for the failure of most first-line […]