javascript - 如何在Vue中将多个文件转换为filebase64？

Question

我有一个表单输入，其中包含 png、pdf、jpg、jpeg 的多个文件输入。我怎样才能把它们变成base64字符串？

我已经尝试过这个这是 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;
    },

但是上面的代码仅适用于单个输入。如何让它们循环输入？

Answer 1

由于您的文件有限，因此它应该非常简单。在 HTML 模板中，将 fileId 传递给 @change 事件处理程序。您的模板将是:

<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>

在你的JS文件中，将读取的文件添加到相应的字段中，例如:

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;
        }
    }

});

如果您有多个长度未知的文件，则 files 应该是一个数组，而不是将 fileId 作为常量值传递，而是使用 index作为处理程序的第一个参数。