Mam dane wejściowe z wieloma plikami wejściowymi dla png, pdf, jpg, jpeg. Jak mogę przekształcić je w ciąg base64?

Próbowałem to jest HTML:

<div class="form-group">
            <label for="npwp">NPWP</label>
            <input type="file" 
            class="form-control-file" 
            id="npwp"
            accept="application/pdf/png/jpg/jpeg"
            @change="updateFormData($event)">
          </div>
          <div class="form-group">
            <label for="NIB">NIB</label>
            <input type="file" 
            class="form-control-file" 
            id="NIB"
            accept="application/pdf/png/jpg/jpeg"
            @change="updateFormData($event)">
          </div>
          <div class="form-group">
            <label for="Logo">Logo</label>
            <input type="file"
            class="form-control-file"
            id="Logo"
            accept="application/pdf/png/jpg/jpeg"
            @change="updateFormData($event)">
          </div>
          <div class="form-group">
            <label for="Others">Others</label>
            <input type="file"
            class="form-control-file"
            id="Others"
            accept="application/pdf/png/jpg/jpeg"
            @change="updateFormData($event)">
          </div>

Javascript:

data() {
return {
   files: [
    {
    selectedFile: null 
   },{
    selectedFile: null 
   },{
    selectedFile: null 
   },{
    selectedFile: null 
   },
  ]
 } 
}

methods:
updateFormData(event) {
      const reader = new FileReader();

      const file = event.target.files[0];

      reader.readAsDataURL(file);
      reader.onload = () => {
        const fileBase64 = reader.result.split(',')[1];
        this.files.selectedFile = fileBase64;
      };
      this.shown = false;
    },

Ale powyższy kod dotyczy tylko jednego wejścia. Jak sprawić, by zapętlały dane wejściowe?

0
dunhilblack 20 listopad 2019, 06:58

1 odpowiedź

Ponieważ masz ograniczone pliki, powinno to być bardzo trywialne. W szablonie HTML przekaż fileId do modułu obsługi zdarzenia @change. Twój szablon wyglądałby tak:

<div class="form-group">
    <label for="npwp">NPWP</label>
    <input type="file" 
    class="form-control-file" 
    id="npwp"
    accept="application/pdf/png/jpg/jpeg"
    @change="updateFormData('npwp',$event)">
</div>

<div class="form-group">
    <label for="NIB">NIB</label>
    <input type="file" 
    class="form-control-file" 
    id="NIB"
    accept="application/pdf/png/jpg/jpeg"
    @change="updateFormData('nib', $event)">
</div>

<div class="form-group">
    <label for="Logo">Logo</label>
    <input type="file"
    class="form-control-file"
    id="Logo"
    accept="application/pdf/png/jpg/jpeg"
    @change="updateFormData('logo', $event)">
</div>

<div class="form-group">
    <label for="Others">Others</label>
    <input type="file"
    class="form-control-file"
    id="Others"
    accept="application/pdf/png/jpg/jpeg"
    @change="updateFormData('others', $event)">
</div>

W pliku JS dodaj odczytany plik do odpowiedniego pola, takiego jak:

new Vue({
    data() {
        return {
            files: {
                'npwp': '',
                'nib': '',
                'logo': '',
                'others': '',
            }
        };
    },

    methods: {
        updateFormData(fileId, event) {
            const reader = new FileReader();

            const file = event.target.files[0];

            reader.readAsDataURL(file);

            reader.onload = () => {
                const fileBase64 = reader.result.split(',')[1];
                this.files[fileId] = fileBase64;
            };
            this.shown = false;
        }
    }

});

Jeśli masz wiele plików o nieznanej długości, to files powinno być tablicą i zamiast przekazywać fileId jako stałą wartość, użyj index jako pierwszego argumentu do handler.

1
Harshal Patil 20 listopad 2019, 10:11
Co jeśli element input ma wiele atrybutów, jak mogę je przekształcić w ciąg base64?
 – 
dunhilblack
20 listopad 2019, 18:01
@dunhilblack, jakie byłyby liczne atrybuty? Czy możesz podać przykład?
 – 
Harshal Patil
21 listopad 2019, 05:53