This paper uses the VUE framework, but no matter what the framework, the principle is the same, so I hope you do not limit their pattern in the framework.

As an aside, Yu Yu Creek recently announced that they are going to develop VUE 3.0, and I heard that the changes are quite big. I don’t think it’s a big deal. I plan to take this opportunity to learn React, and then find a small project to practice. After all, learning VUE 3.0 is also learning, and learning React is also learning, so I want to know more about it.

File upload function development

Anyway, using a third-party component library, I always feel that it is very troublesome to modify, so I decided to implement a set of file upload functions in the recent project.

In fact, it is possible to select a file using the HTML input tag, and then send the selected file to the background via HTTP request. The specific code is as follows:

<input id="upload" type="file">
Copy the code

File selection is implemented by setting type of the input tag to File. Then read the selected file information through the selector.

let uploadFile = document.querySelector("#uploadMission")
let form = new FormData()
form.append('file', uploadFile.files[0])
form.append('yourData'."helloworld")
Copy the code

YourData is the field you want to send to the background in addition to the file field.

{file: here is a big piece of file information, yourData: helloWorld}Copy the code

Therefore, you can transfer parameters based on actual conditions.

Customize file upload styles

There was one problem: HTML was ugly, didn’t fit the UI design at all, and wasn’t easy to change. So the solution I took was to define a style myself and then actually call the native input tag when CLICKED. This way you can make the style look whatever you want, but remember to hide the native input tag. The specific code is as follows:

<span class="yourStyle" @click="uploadFile"> </span <input id="upload" type="file" @change="doRealUpload" style="display: none;" >Copy the code

When uploadFile is clicked, the input click event is invoked to trigger the file selection function. Once the file is selected, it will be read into the Input tag. We just need to follow the above process of developing the file upload function.

It is important to note that the change event on the input tag is triggered after the file is selected, so that the file information can be read. So remember to transfer files to the background in the doRealUpload method.

Solve the problem that uploading the same file repeatedly is invalid

After the above steps, in fact, you can already achieve the custom file upload function. But there are always people who like to upload the same file repeatedly after modification. However, because the change event of input is identified by the file path, if the file name or path is not changed, even if the file content is modified, the change event cannot be triggered during repeated upload.

Upload. Files [0] = null But this property is read-only and cannot be changed. Then I thought, there should be a clear method to clear the file information, right? Unfortunately, there is no…

The situation was awkward, so I figured out how to reload the input tag, which in effect initialized the input tag and erased the file information in it.

Some people might want to regenerate the same input tag using DOM manipulation. It certainly works. But it makes me feel that the old ideas of JQuery don’t fit Vue’s data-centric principles. So I used the V-if and V-show features of Vue.

In Vue, v-if tags are reloaded each time, whereas V-show tags are loaded at the beginning and then read directly from the cache. So I added v-if to the input tag and set inputShow to true each time I called the uploadFile method, and set inputShow to false in the callback function after a successful file upload. This reloads the input tag each time the upload button is clicked, which initializes the input.

The specific code is as follows:

uploadFile() {
    const vm = this
    vm.inputShow = true
    setTimeout( (a)= > {
        let uploadFile = document.querySelector("#upload")
        uploadFile.click()
    }, 100)}Copy the code

The setTimeout method is used because without it, the code may execute faster than the DOM rendering speed, resulting in an error when performing the selection operation. The click event was executed before the input tag was created.

conclusion

At this point our custom file upload function is complete. If you enjoyed this post, be sure to follow it. Your support is the biggest motivation for me to keep sharing.