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

Today, I would like to share with you the relevant knowledge about how to use the Element el-upload upload component. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Upload upload is a commonly used function in front-end development, and the Element component library commonly used in Vue development also provides very useful upload components.

Basic usage

Code:

Click upload

It goes without saying that action is the background interface for uploading, and el-button is the button that triggers the upload.

Number of files uploaded

The first is to set whether multiple files can be uploaded at the same time, which is also an attribute, just add multiple. In addition, the el-upload component provides the limit attribute to set the maximum number of files that can be uploaded. Files selected beyond this number will not be uploaded. The method of on-exceed binding is to handle the actions after the number is exceeded The code is as follows:

Click upload format and size limit

If you need to restrict the format of the uploaded file, you need to add the accept attribute, which uses the same attribute directly. The value of the accept attribute can be accept= "image/gif, image/jpeg, text/plain, application/pdf", and so on. For prompts for file format, you can use slot. The code is as follows:

Click upload. Please upload a file in picture format.

Note that only the format is restricted when selecting files. In fact, users can still click the "all Files" option to upload other formats. If you need to verify again when uploading, select: before-upload this hook to bind the corresponding method to verify, the code is as follows:

Click upload, please upload the picture format file. OnBeforeUpload (file) {const isIMAGE = file.type = = 'image/jpeg' | |' image/gif' | | 'image/png'; const isLt1M = file.size / 1024 / 1024

< 1; if (!isIMAGE) { this.$message.error('上传文件只能是图片格式!'); } if (!isLt1M) { this.$message.error('上传文件大小不能超过 1MB!'); } return isIMAGE && isLt1M; } 这里在限制文件格式的同时，也做了文件大小的校验。 上传过程中的各种钩子 这里直接搬运官网的说明了，如图： 显示已上传文件列表 这个功能可以说很强大了，可以很清晰的显示已上传的文件列表，并且可以方便的删除，以便上传新的文件。 代码： 点击上传 请上传图片格式文件 实现方法就是:file-list="files"这个属性的添加，其中files是绑定的数组对象，初始为空。 效果如下图：

Submit data when uploading

When uploading a file, you need to submit data to the background interface, so you need to use the data attribute.

Click to upload, please upload the image format file... uploadData: {dataType: "0", oldFilePath: ""} Select and upload are processed separately

Sometimes we need to separate the selection and upload, such as uploading pictures, first select the file to submit to the front end, and then submit the base64 content to the background after image processing.

The code is as follows:

Select upload. SubmitUpload () {console.log ("submit")}, onUploadChange (file) {const isIMAGE = (file.raw.type = 'image/jpeg' | | file.raw.type = =' image/png' | | file.raw.type = = 'image/gif'); const isLt1M = file.size / 1024 / 1024 < 1; if (! isIMAGE) {this.$message.error (' upload files can only be in picture format!'); return false } if (! isLt1M) {this.$message.error ('upload file size cannot exceed 1MB'); return false;} var reader = new FileReader (); reader.readAsDataURL (file.raw); reader.onload = function (e) {console.log (this.result) / / base64 data of the image}

The effect is as shown in the figure:

These are all the contents of this article entitled "how to use the Element el-upload upload component". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.