Question

我正在尝试使用multer在节点中表达文件上传程序。我已经成功上传并且也阅读了它，但是当我使用索引进行显示预览时，它无法在检查中显示任何图像，但是有一个完美的链接，但是当我单击该链接并打开它包含％20并且没有预览时图片文件

这是app.js的代码

      app.get('/', (req,res)=>{
   gfs.files.find().toArray((err,files) => {
    //check if files
    if(!files || files.length === 0 ){
        res.render('index', {files: false});
    }else{
        files.map( file => {
            if(file.contentType === 'image/jpeg' || file.contentType === 'image/png'){
                file.isImage = true;
            }else{
                file.isImage = false;
            }
        });
        //console.log(files);

        res.render('index', {files: files});
    }
});
});

这是我的html

 <h1 class="text-center display-4 my-4">Mongo file upload</h1>    
        <form action="/upload" method="POST" enctype="multipart/form-data">
            <div class="custom-file mb-3">
                <input type="file" name="file" id="file" class="custom-file-input">
                <label for="file" class="custom-file-label">Choose File</label>
            </div>
            <input type="submit" value="Submit" class="btn btn-primary btn-block">
        </form>
        <hr>
        <% if(files){ %>
            <% files.forEach(function(file){ %>
                <div class="card card-body mb-3">
                    <%  if(file.isImage){ %>
                        <img src="image/ <%= file.filename %>" alt="Image">
                    <% }else{ %>
                        <%= file.filename %>
                    <% } %>
                </div>
            <%  }) %>
        <% }else{ %>
            <p>No files to show</p>
        <% } %>

Answer 1

％20是一个URL编码的空格字符。

您的html中的这一行包含该空格：

<img src="image/ <%= file.filename %>" alt="Image">
                ^

删除该空间可能会解决您的问题。

使用multer在网址中有％20

1 个答案: