使用单个功能将多个图像转换为基础64

Question

我正在处理一个问题，我必须将三张图像作为用户输入，并且必须通过将其转换为基本64来将其发送到后端。我知道如何为一个输入文件做，但不能为多个输入而努力。

我想拥有一个可以将图像转换为base64＆amp;的单个函数。将每个图像的值存储在单独的变量中。请帮助我。

以下是我用于单个输入IE 第一个图像的代码。

HTML代码

<div class="first_div">
     <label for="first_image">First Image</label>
     <input name="first_image" type="file" accept="image/*" id="first_image" class="img_file">
</div>

<div class="second_div">
     <label for="second_image">Second Image</label>
     <input name="second_image" type="file" accept="image/*" id="second_image" class="img_file">
</div>

<div class="third_div">
     <label for="third_image">Third Image</label>
     <input name="third_image" type="file" accept="image/*" id="third_image" class="img_file">
</div>

<button onclick="submitImages()">Submit</button>
                  

JavaScript代码

let encoded_image;

function getBase64(file) {
   var reader = new FileReader();
   reader.readAsDataURL(file);
   reader.onload = function () {
     console.log(reader.result);
     encoded_image = reader.result;
   };
   reader.onerror = function (error) {
     console.log('Error: ', error);
   };
}


const submitImages = () => {
   var files = document.getElementById('first_image').files[0];
   if (files.length > 0) {
    getBase64(files[0]);
   }

const formData = new URLSearchParams(new FormData());
formData.append("first_image", encoded_image);

fetch(API CALL HERE)

}

我想创建一个从所有三个字段中获取输入的函数，将它们转换为base64＆amp;存储在变量中。这样我就可以将其附加到形成数据。

Answer 1

选择所有输入，循环并获取每个文件的base64
尝试一下

  const getBase64 = (file) =>
    new Promise((resolve, reject) => {
      console.log(file);
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = (err) => reject(err);
    });

  const submitImages = async () => {
    const imageInputs = document.querySelectorAll("input");
    const images = await Promise.all(
      [...imageInputs].map((imageInput) =>
        imageInput?.files?.[0] ? getBase64(imageInput.files[0]) : null
      )
    );
    console.log(images);
  };

Answer 2

此示例是在React中，但您可以轻松地将其修改为标准JavaScript。

如果是标准JavaScript，则只需更改const [images，setImages] = usestate（[]）; in 让images = []。

const [images, setImages] = useState([]);

const formatImage = async() => {
  try {
    for (let i = 0; i < e.target.files.length; i++) {
      const reader = new FileReader();
      reader.readAsDataURL(e.target.files[i]);
      reader.onload = (readerEvent) => {
        images.push(readerEvent.target ? .result);
      };
    }
  } catch (error) {
    console.log(error);
  }
};

<input type="file" multiple onChange={formatImage} />

这是将这些图像放在Firebase Firestore上的一个示例，如果它是标准JavaScript Change setImages（[]） images = []

const addImage = async() => {
  try {
    Promise.all(
      images.map(
        async(file: any) =>
        await addDoc(collection(db, "images"), {
          image: file,
          date: Timestamp.now(),
        })
      )
    );

    setImages([]);
  } catch (error) {
    console.log(error);
  }
};