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>
drag | Enable drag upload |
multiple | Support multiple files |
action | Required parameter, upload address |
http-request | Override the default upload behavior, and you can customize the upload implementation |
before-upload | The hook before uploading a file. The parameter is the uploaded file. If false is returned or Promise is returned and reject ed, the upload will be stopped. |
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