Manual upload of upload component

If the auto upload event of the upload component is not blocked, the upload component will start to upload the file as soon as it uploads the file

Set before upload and return false to prevent the default upload action set the back-end interface for upload

<Upload
  ref="upload"
  :multiple="false"
  :before-upload="handleUpload"
  :show-upload-list="false"
  :format="['jpg','jpeg','png']"
  :on-success="uploadSuccess"
  action="http://192.168.47.100:8080/material/material/upload">
  <div>
    <Icon type="md-image" style="font-size: 120px;color: gainsboro"/>
  </div>
</Upload>

The parameters set in the format property of this version of iview can only work if they are uploaded, and there is no hint. Generally, when selecting a file field, you should limit the type of selection. The handleUpload method is as follows

handleUpload (file) { // Save the file to be uploaded
  let keyID = Math.random().toString().substr(2);
  file['keyID'] = keyID;
  this.file.push(file);
  this.uploadFile.push(file)
  return false;
},

Bind a click event on a button to upload. The click event is defined as follows:

handleSubmit (name) {
        this.formValue.tag_id = this.formValue.tagId
        if(this.uploadFile.length === 0 ) {
            this.$Message.error('Upload file not selected')
            return false
          }
          this.$refs[name].validate((valid) => {
            if (valid) {
              this.loading = true
              for (let i = 0; i < this.uploadFile.length; i++) {
                let item = this.file[i]
                //console.log(item)
                this.$refs.upload.post(item);
              }
            } else {
              this.$Message.error('Submit failed!')
            }
            this.loading = false
          })
      },

Here is the key to file upload, mainly calling this.$refs.upload.post(item) to upload the file. Then my project needs to upload the file first and upload the form information. Where to upload the form information, I need to use the on success hook function to execute the uploadSuccess method, The uploadSuccess method is defined as follows:

uploadSuccess (response, file, fileList) {
        this.uploadResponse = response
        if (this.uploadResponse) {
          if (this.uploadResponse.success) {
            //console.log("file upload succeeded")
            this.formValue.file_url = this.uploadResponse.data
            this.$refs['tagForm'].validate((valid) => {
              if (valid) {
                this.loading = true
                if (this.formTitle == 'Upload works') {
                  //console.log(this.formValue)
                  this.formValue.user_id = 1,
                  this.formValue.title = this.formValue.title.replace(/^\s*|\s*$/g,'');
                  this.formValue.description = this.formValue.description.replace(/^\s*|\s*$/g,'');
                  this.formValue.size = 1;
                  this.formValue.volume = 1;
                  add(this.formValue).then(response => {
                    if (response.data.success) {
                      this.$Message.success(response.data.success.detail)
                    } else {
                      if (response.data.error) {
                        this.$Message.error(response.data.error.detail)
                      }
                    }
                  }).catch(err => {
                    if (err) {
                      this.$Message.error(err.response['data'])
                    }
                  })
                }
              } else {
                this.$Message.error('Submit failed!')
              }
              this.loading = false
            })
          } else {
            this.$Message.error(this.uploadResponse.error.detail)
          }
        }
      },