Recently I have been doing some small things, I want to write a profile picture upload function, but the input file input box is really unbearable, so I have to do it myself, I don’t know how to start, I have to think about how to write component library, here to share with you.

No contrast, no harm. Let’s look at the contrast

This involves a shift in thinking. So let’s analyze it.

  1. Why does the file input box pop up? If you know what event it triggered, you should be able to change the style, replace the original style, just let the event trigger, and still pop up the input field, right?
  2. That’s what it is, except that the input box accepts the click event, and then the file selection box pops up. So we can hide the input box, use the new style to accept the click event, and then launch the INPUT click event in the JS code. How to write style is not your own decision! Taking action
I use Angular syntax. If you don't know angular syntax, please learn it yourself. <div class="el-avatar" (click)="this.triggerInput()">; <p> Please enter your avatar, you can design your own style </p> <! Hide the input box. When the click event is triggered, <input #fileInput (input)=" this.acceptfile ()" type="file" name="file" Accept ="image/*" style="display: none"> </div>; Ts code @viewChild ('fileInput') fileInput; triggerInput() { this.fileInput.nativeElement.click(); / / triggers the click event of the input box} acceptFile () {const imageFile = enclosing the fileInput. NativeElement. Files [0]. } const fileReader = new fileReader ();} const fileReader = new fileReader (); fileReader.onload(callback(fileReader.result.toString())); // Load the file to read as base64 filereader. readAsDataUrl(file); } the above code just explains how to change the style of the file input box. Okay, you can change the style to suit your needsCopy the code