ExpressJS XMLHttpRequest Routing Error

我遇到一个问题，即我尝试将查询参数形式的文件信息传递到我设置为上传 AWS 文件的路由，然后返回 URL。我遇到的问题是表单位于使用/create/comment路由访问的视图文件中，并且附加到我的所有路由之前都是/app。在我的XMLHttpRequest中，我请求/app/sign和文件查询参数，但由于某种原因，它一直以/app/create或/app/create/app/sign作为前缀，这就是我遇到404错误的原因。有没有办法防止/app/create的预置？

xhr.send();误差功能

function sign_request(file, done) {
        var xhr = new XMLHttpRequest();
        console.log(xhr);
        console.log(file);
        xhr.open("GET", "app/sign?file_name=" + file.name + "&file_type=" + file.type);
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4 && xhr.status === 200) {
                var response = JSON.parse(xhr.responseText);
                console.log(response);
                done(response);
            }
        };
        xhr.send();
    };

错误信息：

comment:139 GET http://localhost:3000/app/create/app/sign?file_name=File-name.png&file_type=image/png 404 (Not Found)

这是我的路线设置：

  var express = require('express');
    var router  = express.Router();
    router.use('/app');
var config = require(path.resolve(__dirname, '..', '..','./config/config.js'));
var models = require('../models/db-index');
var fs = require('fs');
var aws = require('aws-sdk');
    /*====   /SIGN  ====*/
    router.get('/sign', function(req, res){
        aws.config.update({accessKeyId: config.awsAccessKeyId, secretAccessKey: config.awsSecretAccessKey});
        var s3 = new aws.S3()
        var options = {
          Bucket: config.awsBucket,
          Region: 'us-east-1',
          Key: req.query.file_name,
          Expires: 60,
          ContentType: req.query.file_type,
          ACL: 'public-read'
        }
        s3.getSignedUrl('putObject', options, function(err, data){
          if(err) return res.send('Error with S3')
          res.json({
            signed_request: data,
            url: 'https://s3.amazonaws.com/' + S3_BUCKET + '/' + req.query.file_name
          });
        });
    });
    router.get('/create/comment',function(req, res){
            models.DiscoverySource.findAll({
                where: {
                    organizationId: req.user.organizationId
                }, attributes: ['discoverySourceName']
            }).then(function(discoverySource){
                res.render('pages/app/comment-create.hbs',{
                    discoverySource: discoverySource
                });
            });
        });

表单（访问/app/create/comment）：

<!DOCTYPE html>
<head>
    {{> app/app-head}}
</head>
<body>
    {{> app/app-navigation}}
    <div class="container">
        <div class="col-md-12">
            <div class="row-form-container">
                <label for="report-link">File Attachment:</label>
                    <input type="file" name="fileAttachment" id="image"> 
                    <img id="preview">
            </div>
    </div>
    <script type="text/javascript">

        function upload(file, signed_request, url, done) {
            var xhr = new XMLHttpRequest();
            xhr.open("PUT", signed_request);
            xhr.setRequestHeader('x-amz-acl', 'public-read');
            xhr.onload = function() {
            if (xhr.status === 200) {
                done();
            };
        };
        xhr.send(file);
        }
    function sign_request(file, done) {
        console.log('work please');
        var xhr = new XMLHttpRequest();
        console.log(xhr);
        console.log(file);
        xhr.open("GET", "app/sign?file_name=" + file.name + "&file_type=" + file.type);
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4 && xhr.status === 200) {
                var response = JSON.parse(xhr.responseText);
                console.log(response);
                done(response);
            }
        };
        xhr.send();
    };
    document.getElementById("image").onchange = function() {
        var file = document.getElementById("image").files[0]
        if (!file) return
            sign_request(file, function(response) {
                upload(file, response.signed_request, response.url, function() {
                    document.getElementById("preview").src = response.url
                });
            });
    };
    </script>
</body>

在发送请求时app/sign之前添加/将防止当前子路径的前缀。尝试：

xhr.open("GET", "/app/sign?file_name=" + file.name + "&file_type=" + file.type);

相关内容

最新更新

热门标签：