Background:

         The recent project has the function of uploading files. The design drawings given by the artist are similar to the elementUI upload component, so it's easy to do. Unexpectedly, the upload progress bar behind tortured me for a long time

        (mainly record the problems encountered in the development process. If there is something wrong in the article, I hope the boss can kindly point it out)

        Functional requirements: file size judgment, file type judgment, upload and display progress bar.

         The final effect is like this:

Function point:

         Although the official website of the component gives many examples, the project encapsulates the axios request and uses the proxy server to solve the cross domain problem. Instead of using the action of the component itself, I choose HTTP request   Custom upload.

  These are relatively simple. First go to the code (all the following codes are on the same page):

Code in template

              // Upload component configuration
              <div class="UploadAppSon">
                <el-upload
                  class="upload-demo"
                  drag
                  multiple
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :http-request="uploadFile"
                  :before-upload="beforeUpload"
                >
                  <i class="el-icon-upload" />
                  <div class="el-upload__text">
                    Drag the file here, or<em>Click upload</em>
                  </div>
                  <br>
                  <span
                    style="color:#999999;"
                  >Support Android apk,Apple ipa Format file</span>
                </el-upload>
              </div>

The table above is a detailed explanation of the attributes used in the component  

Methods: Code in methods   (verification before file upload)

    // Verification before file upload
    beforeUpload(file) {
      // Type judgment
      const isAPK = [
        'application/vnd.android.package-archive',
        'image/png'
      ].includes(file.type)
      // Size judgment
      const is1024M = file.size / 1024 / 1024 < 1024
      if (!isAPK) {
        // type mismatch
        this.$message.error('Upload file can only be apk,ipa format!')
      }
      if (!is1024M) {
        // Size mismatch
        this.$message.error('Upload file size cannot exceed 1 GB !')
      }
      // Return false to block normal upload
      return isAPK && is1024M
    },

         At this step, the verification before file upload has been completed. Now you need to complete custom upload and display the progress bar. Because the user-defined upload is used, the progress bar display of the upload component is overwritten. After clicking the file, the success icon is directly displayed. Without the progress bar, I found a lot of information on the Internet. Finally, the following two methods are combined to complete the progress bar display:

• The onUploadProgress method of axios (axios itself has a method to provide the progress value of file upload and download, and the progress value itself represents that the request is in progress.) to obtain the upload progress.  
• Use the onProgress() method to define the value of the progress bar.

    // Override the default upload behavior, and you can customize the upload implementation
    async uploadFile(param) {
      // param.file is the uploaded file itself

      const formData = new FormData()
      formData.append('file', param.file)
      formData.append('PHP_SESSION_UPLOAD_PROGRESS', 'file1')

      // Initiate request
      request({
        method: 'post',
        // Upload the address. Because my request here has been encapsulated by myself, I only need to fill in the address behind the interface
        url: '/App/upfile',
        data: formData,
        // Key point 1: complete is the upload progress after processing. The value is 1-100
        onUploadProgress: progressEvent => {
          const complete = parseInt(
            ((progressEvent.loaded / progressEvent.total) * 100) | 0,
            10
          )
          // Point 2: onProgress() method needs the formal parameters received by the above party to be called
          // This method has a parameter "percent". Just give him the progress value complete
          param.onProgress({ percent: complete })
        }
      }).then(res => {
        console.log(res)
      })
    },

Here, the verification before file upload and the function of displaying the progress bar are completed.

Focus!!!!!!!!!!!!

         My request here is an encapsulated axios request. The project base address is uniformly configured, and the request header is added to the request interceptor, carrying the token. The request method can be used directly here because I imported this method:

  Finally, this axios request must be configured according to your project situation.

  Finish----------------------------

If this article is helpful to you, please praise it! ღ (´ᴗᴗღ) comparison Center