current position:Home>Use of element upload component

Use of element upload component

2021-08-26 00:37:03 Wang Shouyi spicy hot

element Upload components Upload Use

1、html part

<el-form ref="ruleForm_1" :model="ruleForm_1" :rules="rules" label-width="120px" class="ruleForm_1">
    <el-form-item label=" picture " prop="attachments"> <el-upload class="upload-demo" :action="actionUrl" :data="{type:'image'}" :on-success="handleSuccess" :before-upload="handleBeforeUpload" :on-remove="handleRemove" :limit="1" :on-exceed="handleExceed" :file-list="fileList" accept=".jpg,.png,.jpeg" > </el-form-item> </el-form>
 Copy code 
1.1、 Attribute resolution

action: Required parameters , Uploaded address
data: Additional parameters that come with the upload
on-success: Upload success event , You can put it here to handle the parameters required by the interface before-upload: Events before uploading , You can do school here
on-remove: Delete event
limit: Upload limit on-exceed: Hook when the number of files exceeds the limit
file-list: List of uploaded files
accept: Filter the corresponding format file , Such as uploading pictures , Then only folders and picture files will appear in the window

  • Of course, there are some other common properties that are not used ( More can go el Official website ). Such as :

show-file-list: Whether to display a list of uploaded files ,boolean type
headers: Sets the request header for the upload , If you need to carry token It will be used
list-type: Type of file list , The default value is text, Optional values are text/picture/picture-card. Here's the picture

  • The default value is :text

image.png

  • picture

image.png

  • picture-card

image.png

2、js part

export default {
    data() {
        return {
            actionUrl: process.env.VUE_APP_BASE_API + '/file/upload', //  Upload components action Address 
            fileList: [], //  For data binding 
            ruleForm_1: { //  For data requests 
                attachments: []
            }
        }
    },
    methods: {
      //  Delete uploaded images 
      handleRemove(file, fileList) {
          const index = this.fileList.findIndex(item => item.uid === file.uid)
          this.fileList = fileList
          this.ruleForm_1.attachments.splice(index, 1)
      },
      //  Upload success event ( For data requests )
      handleSuccess(res, file, fileList) { //  Upload success event 
          this.ruleForm_1.attachments.push({
            name: res.data.name,
            url: res.data.netResourcePath,
            path: res.data.path,
            size: res.data.size
          })
     },
     //  Hook when the number of pictures exceeds the limit 
     handleExceed(files, fileList) {
         this.$message.warning(` Only upload at most  1  A picture `)
     },
     //  Event before uploading pictures , check 
     handleBeforeUpload(file) {
         const imgReg = /\.(jpg|png|jpeg)$/
         const isLt1M = file.size / 1024 / 1024 < 2
         if (!imgReg.test(file.name)) {
             this.$message.error(' Uploading pictures can only be jpg/png/jpeg Format !')
         }
         if (!isLt1M) {
             this.$message.error(' The size of the uploaded picture file cannot exceed  2MB!')
         }
         return imgReg.test(file.name) && isLt1M
    },
     
   }
}
 Copy code 

copyright notice
author[Wang Shouyi spicy hot],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210826003700270a.html

Random recommended