想要将手机拍摄的照片保存在我的 SvelteKit 项目中

Question

我的项目允许用户从桌面上传图像文件。如果用户使用移动设备，他们可以从手机相机拍照，或从相机胶卷上传。

即使在移动设备上可以很好地拍摄照片，但当用户转到下一页时，照片应该是可见的。然而，在目前的情况下，拍摄的照片并未保存。但如果照片是从相机胶卷上传的，它就会出现在下一页上。

我很难找到一种方法来保存新拍摄的照片，就好像它是传统的文件上传一样。

<script lang="ts">
  import { createEventDispatcher } from 'svelte';

  ...

  let input: HTMLInputElement;

  const dispatch = createEventDispatcher();
  
  ... 

  async function onChange() {
    if (input.files && input.files.length < 2) dispatchFile(input.files[0])
  }

  ...

  function dispatchFile(file: File) {
    dispatch('stepChange', { file }); // 'stepChange' refers to moving to the next page of the user flow
  }
   
</script>

<div slot="is-mobile-or-tablet" class="flex h-full w-full items-center justify-center">
  <div class="grid grid-rows-4 gap-3">
    <input
      type="file"
      id="actual-btn"
      accept="image/*"
      capture="environment"
      hidden
      bind:this={input}
      on:change={onChange}
    />
    <label for="actual-btn">Take Photo</label>

    <input
      type="file"
      name="photo"
      id="camera-roll-btn"
      accept="image/*"
      hidden
      bind:this={input}
      on:change={onChange}
    />
    <label for="actual-btn">Camera Roll</label>

  ...

  </div>
</div>

如果有一种方法可以在不安装任何额外的软件包或插件的情况下做到这一点，那将是非常好的选择。

Answer 1

我认为您可以使用 HTML 媒体捕获 API，它允许您的用户直接访问摄像头和麦克风 fetch('your end point', { 方法：'POST'， 正文：表单数据 }) .then(响应=> { // 处理响应 }) .catch（错误=> { // 处理错误 }); }