javascript 理解将图像存储到服务器并在客户端检索它们的机制

pdtvr36n  于 12个月前  发布在  Java
关注(0)|答案(1)|浏览(95)

我有两个API端点用于图像上传,一个用于本地服务器(http://localhost:8000/api/image/upload),另一个用于实时服务器(https://complete-auth-api.vercel.app/api/image/upload)。我遇到了一个问题,特别是在实时服务器上,我收到一个500内部服务器错误,并伴随错误消息:

import express  from "express";
import {addimage, getimage } from '../controller/addimage.js'
import multer from "multer";
const router=express.Router()

const storage = multer.diskStorage({
    destination:function(req,file,cb) {
        return cb(null,'./uploadphoto')
    },
    filename:function(req,file,cb){
     return cb(null,`${Date.now()}_${file.originalname}`)   
    }
})

const upload = multer({storage:storage})

// upload a image
// http://localhost:8000/api/image/upload
router.post('/upload',upload.single('photo'),addimage)

router.get('/getimage',getimage)
export default router

addimage.js
    export const addimage=(req,res)=>{
    console.log("hello image")
    console.log(req.file)
    try {
        req.app.locals={
            photo:req.file.filename,
        }
        console.log("image uploaded")
        return res.send(req.file)
    } catch (error) {
        console.log("image uploading failed")
        return res.send(error)
    }
    
}

export const addproduct=async(req,res)=>{
const headerToken=req.headers.authorization
   try {
        const token=headerToken?.split(" ").pop()
        const decode= jwt.verify(token,process.env.ACCESSTOKEN)
        // const decode= jwt.verify(token,process.env.REFRESHTOKEN)
        if(decode.role==='admin'){
            try {
               const photo=req.app.locals.photo
                if(photo===undefined){
                    return res.send("please select an image")
                }
                const data=req.body
                data.product_image=photo
                const new_data=await ProductModel(data)
                 new_data.save()
                return res.send("product added successfully")
            } catch (error) {
                
            }
        }        
        return res.send("you are not a authorized user")
    } catch (error) {
      return res.send(error.message)  
    }

}

字符串

错误:ENOENT:没有这样的文件或目录,打开'uploadphoto/1704163351625_product-1.jpg'
问:如果我能够在本地创建上传目录,但在Vercel的无服务器环境中创建目录时受到限制,我如何在Vercel上处理图像上传?

我调查了亚马逊和Flipkart网站,发现他们提供图片URL。

**Q.在本地上传图片时,我使用Multer生成一个唯一的文件名,然后将该文件名存储在MongoDB中。但我不确定为上传的图片创建URL的过程。在Web开发场景中,如何为存储在MongoDB中的图片生成URL?**x1c 0d1x我想了解将图像上传到服务器的机制,特别是使用MongoDB的服务器,并为客户端检索它。
我接触过Vercel Blob Storage,但我很难掌握它的功能。您能否详细介绍Vercel Blob Storage的工作原理以及如何在Web开发环境中使用它?

lmyy7pcs

lmyy7pcs1#

我想了解将图像上传到服务器的机制,特别是使用MongoDB的服务器,并为客户端检索它。
序列将类似于下面

  • 用户使用带有type=fileinput标签从浏览器上传图像
  • 表单沿着选定的图像通过API路由enctype=multipart/form-data提交到服务器
  • 您的服务器代码将收到POST请求。这可以用Multer处理,就像在您的代码中一样。
  • 解析表单数据并获取图像细节。
  • 生成一个唯一的文件名,并将其作为文件名将文件内容写入Vercel Blob或Amazon S3或您的服务器中。(Vercel无服务器环境不支持存储在您的Web服务器中-https://vercel.com/guides/how-to-upload-and-store-files-with-vercel
  • 将生成的唯一文件名存储在mongodb中,以便我们稍后可以在html代码中检索它。
  • 该图像可以稍后通过<img src='YOUR-FILE-STORAGE-LOCATION/UNIQUE-FILENAME' />访问

检查此以获取有关如何将图像上传到Vercel Blob存储的更多详细信息-https://vercel.com/docs/storage/vercel-blob/quickstart#client-uploads

相关问题