Implementation method of uploading el-upload file in elementUI

Use the el-upload component in elementUI to implement file upload

http-request: Allows custom methods to handle file upload requests.

before-upload: It is from the Element UI<el-upload>A hook function of the component that is called before uploading the file. You can perform some custom verification or operations in this hook. For example, set the upload file size

on-change：on-changeThe event is fired when the file state changes. The file status here usually refers to changes in the upload progress or the success/failure of the upload operation.on-changeThe event handler will receive a parameter, which is an object, which contains the relevant information of the file, such asfile(File object),fileList(File List),name(Event Name) etc.

&lt;span&gt;
&lt;el-form-item label="File Address:" prop=""/&gt;
&lt;/span&gt;
&lt;el-upload
    ref="upload"
    :file-list="formFileUploadForm"
    :http-request="handleUploadForm"
    :on-change="handleChange"
    :before-upload="beforeUpload"
    :show-file-list="false"
    :auto-upload="false"
    class="upload-demo"
    action=""
&gt;
    &lt;el-input v-model = '' type="primary" readonly styele="width:240px;line-height:0px;padding-right:20px"&gt;
    &lt;el-button size="mediumTwo" type="primary"&gt;Preview&lt;/el-button&gt;

&lt;/el-upload&gt;

handleUploadForm(params){
    const formData = new FormData()
    ('file',)
    ('FileName','')
    axios({
        url:'',
        methods:'post',
        headers:{'Content-Type':'multipart/form-data'},
        data:formData
    }).then(res=>{
        if(==200){
            return this.$pop(,'success',this)
        }else{
            return this.$pop(,'warning',this)
        }
    }).catch(err=>{
        return this.$pop(error,'error',this)
        }
    })
}

beforeUpload(file) {
      ('Check before file upload', file);
      // Here you can check some files, such as file type, file size, etc.      // Return false or return a Promise object. The file will not be uploaded when the Promise object rejects.      return new Promise((resolve, reject) =&gt; {
        if ( / 1024 / 1024 &gt; 2) {
          this.$('File size cannot exceed 2MB!');
          reject(new Error('File size cannot exceed 2MB!'));
        } else {
          resolve(file);
        }
      });
    },

 handleChange(response, file, fileList) {
      if ( === 'success') {
        ('File upload successfully', file);
      } else if ( === 'error') {
        ('File upload failed', file);
      }
    }

Summarize

This is the article about the upload and implementation of el-upload file in elementUI. For more related el-upload file upload content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!