Reactjs/Nodejs/Mongodb：Blob url 在 img src 中不起作用

Question

在我的 meern stack 项目中，我允许用户上传多个图像并使用 blob 创建上传图像的 URL。使用 MongoDB 来存储这些 URL。现在，当我在前端尝试获取数据并在 img src 标记中使用相同的 blob URL 时，它不起作用。你能告诉我这里出了什么问题吗？ 或者建议我最好的方法是什么。使用 MongoDB 是最佳实践吗？

          <Swiper
            onSwiper={setThumbsSwiper}
            spaceBetween={10}
            slidesPerView={6}
            freeMode={true}
            watchSlidesProgress={true}
            modules={[FreeMode, Navigation, Thumbs]}
            className="mySwiper"
          >
            {productDetails.images?.map((imgurl, index) => (
              <SwiperSlide key={index}>
                <img src={imgurl} alt="product-img" />
              </SwiperSlide>
            ))}
          </Swiper>
        </div>

<div className="media-add-files-box">
                            <input
                              type="file"
                              name="images"
                              ref={imageUploadInput}
                              className="image-upload-input"
                              multiple
                              accept="image/png, image/jpeg, image/webp, image/jpg"
                              onChange={handleSelectFile}
                              onChangeCapture={handleAdFormValues("images")}
                            ></input>
                            <button
                              type="button"
                              className="media-add-btn"
                              onClick={triggerImageUploader}
                            >
                              Add photos
                            </button> 

function handleSelectFile(e) {
    const selectedFiles = e.target.files;
    if (!selectedFiles || !selectedFiles[0]) return null;
    setIsImageSelected(true);
    const selectedFilesArray = Array.from(selectedFiles);
    const imagesArray = selectedFilesArray.map((file) => {
      return URL.createObjectURL(file);
    });
    setSelectedImages((previousImages) => previousImages.concat(imagesArray));
    setAdFormValues({
      ...adFormValues,
      images: [...imagesArray],
    });
    console.log(adFormValues.images);
  }

Answer 1

MDN：URL：createObjectURL()

URL 生命周期与其所在窗口中的文档相关联 创建的。新对象 URL 表示指定的 File 对象或 Blob 对象。

您在代码中使用此函数来生成一旦特定浏览器会话关闭就不再相关的 URL。

处理图像有多种解决方案：将二进制数据直接存储在数据库中，将图像存储在服务器上，然后将文件的 URL 存储在数据库中，或者使用云服务，例如Cloudinary 托管文件并为您提供在代码中引用的 URL。使用哪种解决方案完全取决于您项目的范围和需求。

从您的代码中不清楚图像在何处或如何上传到服务器（您的或外部服务），但如果您只是尝试单独使用上述 blob 函数，那么这将不起作用，因为您实际上，除了该特定浏览器会话中的内存中之外，并未将图像存储在任何地方。