Use of element upload component

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

• picture

• picture-card

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