Shulou(Shulou.com)05/31 Report--

In this article Xiaobian for you a detailed introduction of "how to use FileReader API to create Vue file reader components", detailed contents, clear steps, details handled properly, I hope that this article "how to use FileReader API to create Vue file reader components" article can help you solve doubts, the following slowly deepen along with Xiaobian's ideas to learn new knowledge bar.

FileReader API

FileReader API provides a good interface to read data in different ways using text or Blob object types.

The FileReader instance has a readAsText method that we can use to read the file as text:

Const reader = new FileReader (); reader.readAsText (file)

Because FileReader API is asynchronous, it exposes events that we can use to get its state. In particular, when reading a file, we need the onload event to access the data:

Const reader = new FileReader (); reader.onload = e = > console.log (e.target.result); reader.readAsText (file)

As you can see, text data can be accessed through e.target.result.

File reader component

The previous code has read a file, but we still have to give it a file object. To do this, we must use the HTML tag, which triggers a change event and then accesses the file through e.target.files.

Let's create a FileReader component and group it together:

Vue.component ('file-reader', {template:' # fileReader', methods: {loadTextFromFile: function (e) {const file = e.target.files [0] const reader = new FileReader () reader.onload = e = > this.$emit ('load', e.target.result) reader.readAsText (file)})

The component listens for load events so that the parent component can process the data.

Working with components

Demonstrate our component by mounting the newly created file-reader component under the div element of # app:

Let app = new Vue ({el:'# app', data () {return {text:''})

We need to add a text attribute to the data and bind it to the textarea using v-model. Finally, we will capture the @ load event and set the text property to a valid load event through $event.

The effect you see at this time is as follows:

In fact, by now, the function is already in place. If you do something like this in your browser, you can see the effect:

Special reminder: I have tried several file formats, for pictures, PDF and other file formats will be garbled, but when loading files such as .md or .doc, the corresponding content can be displayed normally in textarea.

Add Styl

If you read here, you should see the effect. Very ugly (in fact, there is no styling effect). Next, add some styles to make it look better.

The rendering effect is different in each browser. If we want the same rendering effect, we need to have a custom style. Then you can hide input and use it instead.

To hide input, you can use opacity:0 or use display:block, visibility:hidden to make it accessible. We also need to use the position and z-index attributes to put it after label:

Read File. File-reader {position: relative; overflow: hidden; display: inline-block; border: 2px solid black; border-radius: 5px; padding: 8px 12px; cursor: pointer; input {position: absolute; top: 0; left: 0; z-index:-1; opacity: 0;}}

Of course, to look good, you can also add some styles to other elements. In the end, the effect you see is as follows:

Read here, this "how to use FileReader API to create Vue document reader assembly" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more about the article, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.