In the vue project, use the Upload Component of element-ui as an example, vueelement-ui

Source: Internet
Author: User

In the vue project, use the Upload Component of element-ui as an example, vueelement-ui

This article describes an example of using the Upload Component of element-ui in the vue project. The details are as follows:

<El-upload v-else class = 'enabure ensureButt ': action = "importFileUrl": data = "upLoadData" name = "importfile": onError = "uploadError ": onSuccess = "uploadSuccess": beforeUpload = "beforeAvatarUpload"> <el-button size = "small" type = "primary"> OK </el-button>

Among them, importFileUrl is the background interface, upLoadData is the additional parameter to be uploaded when uploading files, uploadError is the callback function when the file fails to be uploaded, and uploadSuccess is the callback function when the file is uploaded successfully, beforeAvatarUpload is a function called before uploading a file. We can determine the file type here.

Data () {importFileUrl: 'http: dtc.com/cpy/add', upLoadData: {cpyId: '000000', occurTime: '2017-08'}, methods: {// callback uploadSuccess (response, file, fileList) {console. log ('upload file', response)}, // upload error uploadError (response, file, fileList) {console. log ('upload failed. Please try again! ')}, // Determine the file size before uploading beforeAvatarUpload (file) {const extension = file. name. split ('. ') [1] = 'xls' const extension2 = file. name. split ('. ') [1] = 'xlsx' const extension3 = file. name. split ('. ') [1] = 'Doc' const extension4 = file. name. split ('. ') [1] = 'docx' const isLt2M = file. size/1024/1024 <10 if (! Extension &&! Extension2 &&! Extension3 &&! Extension4) {console. log ('upload template can only be in xls, xlsx, doc, and docx formats! ')} If (! IsLt2M) {console. log ('upload template size cannot exceed 10 MB! ')} Return extension | extension2 | extension3 | extension4 & isLt2M }}

Recently, I used VUE as the front-end framework to build my own project. When I needed to upload files to the server, my colleagues told me that the action in upload, that is, the upload address, cannot be changed dynamically, then, let's take a look. We need to do the following to use it dynamically:

Action is a required parameter and its type is string. We write the action as action, followed by a method name, call the method, and return the address you want. Sample Code:

// Html code <el-upload: action = "UploadUrl ()": on-success = "UploadSuccess ": file-list = "fileList"> <el-button size = "small" type = "primary"> Click Upload </el-button> <div slot = "tip" class = "el-upload _ tip"> </div> </el-upload>
// Js Code writes the method to be called in methods: {UploadUrl: function () {return "return the address to be uploaded ";}}

This is my solution, hoping to help the people who need it

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.