Question

我遇到一个问题，我试图将查询参数表单中的文件信息传递给我设置的路由，以便上传我的AWS文件，然后返回网址。我遇到的问题是表单位于使用/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>

Answer 1

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

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

ExpressJS XMLHttpRequest路由错误

1 个答案: