File upload is the most common business requirement. The upload function can be simple or complex. Simple is to transfer the file. Complex is to continue the transmission of large files at breakpoints and control concurrency. I don't know how much you know about upload. Today I'd like to share with you some of the most common scenarios in the upload requirements. I won't say much. Let's start:

Drag upload

Drag upload involves style interaction and file information acquisition. First, let's learn about several drag related events:

1. Drawer - triggered when the dragged object enters the target container
2. dragleave - triggered when the dragged object leaves the target container
3. drop - the dragged object enters the target container and is triggered when the mouse button is released

After understanding these events, it is quite easy to drag and upload. Effect drawing first:

Effect display

When the dragged object enters the target container, the container border turns red. When you drag out the target container or release the mouse button, the container border is grayed out. When the mouse button is released, the file information of the dragged object is obtained.

code implementation

<template>
  <div ref="drag" class="drag">
    <div class="drag-icon-box">
      <!-- Using element-ui Icon for -->
      <i class="el-icon-upload"></i> 
    </div>
    <div class="drag-message">
      <span class="drag-message-title">Drag the file here, or</span>
      <label for="file" class="drag-message-label">
        <input
          class="drag-message-input"
          type="file"
          id="file"
          name="file"
          @change="handleFileChange"
        />
        <span class="drag-message-manual">Click upload</span>
      </label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null
    }
  },
  async mounted() {
    // Bind related drag events to the container
    this.bindEvents()
  },
  methods: {
    bindEvents() {
      const drag = this.$refs.drag
      // The dragged object enters the target container
      drag.addEventListener('dragover', e => {
        e.preventDefault()
        drag.style.borderColor = 'red'
      })
      // The dragged object leaves the target container
      drag.addEventListener('dragleave', e => {
        e.preventDefault()
        drag.style.borderColor = '#eee'
      })
      // The dragged object enters the target container and releases the mouse button
      drag.addEventListener('drop', e => {
        e.preventDefault()
        drag.style.borderColor = '#eee'
        const fileList = e.dataTransfer.files
        this.file = fileList[0]
        this.uploadFile()
      })
    },
    async uploadFile() {
      const form = new FormData()
      form.append('name', 'file')
      form.append('file', this.file)
      const res = await axios.post('/upload', form)
    },
    handleFileChange(e) {
      const file = e.target.files[0]
      if (!file) return
      this.file = file
      this.uploadFile()
    }
  }
}
</script>

<style lang="scss" scoped>
.drag {
  width: 660px;
  height: 300px;
  border: 2px dashed;
  border-color: #a3a3a3;
  border-radius: 5px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  .drag-icon-box {
    width: 100%;
    height: 60px;
    text-align: center;
    font-size: 50px;
    line-height: 60px;
    color: #606266;
  }
  .drag-message {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    .drag-message-title {
      font-size: 14px;
      color: #606266;
    }
    .drag-message-label {
      width: 120px;
      height: 50px;
      height: auto;
      position: relative;
      overflow: hidden;
      .drag-message-input {
        position: absolute;
        left: -100px;
        top: -100px;
        z-index: -1;
        display: none;
      }
      .drag-message-manual {
        font-size: 14px;
        color: #4b87ff;
        cursor: pointer;
      }
    }
  }
}
</style>

Upload progress bar

Progress bar is the most common requirement, especially when uploading large files. The implementation method is also relatively simple. Just use the onUploadProgress method of axios.

Effect display

code implementation

<div>
  <!-- Using element-ui Progress bar component -->
  <el-progress
    :stroke-width="20"
    :text-inside="true"
    :percentage="uploadProgress"
  ></el-progress>
</div>

<script>
export default {
  data() {
    return {
      file: null,
      uploadProgress: 0
    }
  },
  methods: {
    async uploadFile() {
      const form = new FormData()
      form.append('name', 'file')
      form.append('file', this.file)
      const res = await axios.post('/uploadfile', form, {
        onUploadProgress: progress => {
          this.uploadProgress = Number(
            ((progress.loaded / progress.total) * 100).toFixed(2)
          )
        }
      })
    },
    handleFileChange(e) {
      const file = e.target.files[0]
      if (!file) return
      this.file = file
      this.uploadFile()
    }
  }
}
</script>

Cancel upload

When the upload is very slow, or when you shake your hand and upload a video that should not be uploaded (you know), can you cancel it if the upload is not completed? Of course, the answer is yes.

Effect display

In fact, canceling the upload is to cancel the ajax request. You can use the cancel token of axios to cancel it.

Method 1: create a cancel token using the CancelToken.source factory method

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.post('/upload', form, {
  cancelToken: source.token
})

source.cancel();

Method 2: pass an executor function to   CancelToken   To create a cancel token

const CancelToken = axios.CancelToken;
let cancel;

axios.post('/upload', form, {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
});

cancel();

Interested students can try to integrate the above methods into their own projects.

summary

ok, the above are some of the most common scenarios in upload requirements. Whether drag upload or paste upload, the most important thing is to get the file information through the corresponding events. The progress bar and cancel upload are implemented by using the api of axios. axios also has many practical configuration options. You can study them yourself.

If the above is helpful to you, don't forget to like it~

It is said that people who like praise are not bad luck. I believe you will pass every exam and win every prize this year 😘