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

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.