Javascript 文件名未用作AWS S3名称

我正在使用expressjs，并试图将一个可以在我的应用程序中使用的图像发布到AWS S3。我一直在关注这一点，虽然我能够成功上传图像，但每次提供的文件名都是

default\u name

，我不相信字符串中附加了文件格式来提供正确的图像格式。当我查看教程中提供的

s3upload.js

脚本时，我注意到

default\u name

是它们为文件提供的标准名称，但我不确定它为什么不使用标题就接受我的文件

events-create.ejs（我可以在这里上传）：

s3upload.js：

(function() {

  window.S3Upload = (function() {

    S3Upload.prototype.s3_object_name = 'default_name';

    S3Upload.prototype.s3_sign_put_url = '/signS3put';

    S3Upload.prototype.file_dom_selector = 'file_upload';

    S3Upload.prototype.onFinishS3Put = function(public_url) {
      return console.log('base.onFinishS3Put()', public_url);
    };

    S3Upload.prototype.onProgress = function(percent, status) {
      return console.log('base.onProgress()', percent, status);
    };

    S3Upload.prototype.onError = function(status) {
      return console.log('base.onError()', status);
    };

    function S3Upload(options) {
      if (options == null) options = {};
      for (option in options) {
        this[option] = options[option];
      }
      this.handleFileSelect(document.getElementById(this.file_dom_selector));
    }

    S3Upload.prototype.handleFileSelect = function(file_element) {
      var f, files, output, _i, _len, _results;
      this.onProgress(0, 'Upload started.');
      files = file_element.files;
      output = [];
      _results = [];
      for (_i = 0, _len = files.length; _i < _len; _i++) {
        f = files[_i];
        _results.push(this.uploadFile(f));
      }
      return _results;
    };

    S3Upload.prototype.createCORSRequest = function(method, url) {
      var xhr;
      xhr = new XMLHttpRequest();
      if (xhr.withCredentials != null) {
        xhr.open(method, url, true);
      } else if (typeof XDomainRequest !== "undefined") {
        xhr = new XDomainRequest();
        xhr.open(method, url);
      } else {
        xhr = null;
      }
      return xhr;
    };

    S3Upload.prototype.executeOnSignedUrl = function(file, callback) {
      var this_s3upload, xhr;
      this_s3upload = this;
      xhr = new XMLHttpRequest();
      xhr.open('GET', this.s3_sign_put_url + '?s3_object_type=' + file.type + '&s3_object_name=' + this.s3_object_name, true);
      xhr.overrideMimeType('text/plain; charset=x-user-defined');
      xhr.onreadystatechange = function(e) {
        var result;
        if (this.readyState === 4 && this.status === 200) {
          try {
            result = JSON.parse(this.responseText);
          } catch (error) {
            this_s3upload.onError('Signing server returned some ugly/empty JSON: "' + this.responseText + '"');
            return false;
          }
          return callback(result.signed_request, result.url);
        } else if (this.readyState === 4 && this.status !== 200) {
          return this_s3upload.onError('Could not contact request signing server. Status = ' + this.status);
        }
      };
      return xhr.send();
    };

    S3Upload.prototype.uploadToS3 = function(file, url, public_url) {
      var this_s3upload, xhr;
      this_s3upload = this;
      xhr = this.createCORSRequest('PUT', url);
      if (!xhr) {
        this.onError('CORS not supported');
      } else {
        xhr.onload = function() {
          if (xhr.status === 200) {
            this_s3upload.onProgress(100, 'Upload completed.');
            return this_s3upload.onFinishS3Put(public_url);
          } else {
            return this_s3upload.onError('Upload error: ' + xhr.status);
          }
        };
        xhr.onerror = function() {
          return this_s3upload.onError('XHR error.');
        };
        xhr.upload.onprogress = function(e) {
          var percentLoaded;
          if (e.lengthComputable) {
            percentLoaded = Math.round((e.loaded / e.total) * 100);
            return this_s3upload.onProgress(percentLoaded, percentLoaded === 100 ? 'Finalizing.' : 'Uploading.');
          }
        };
      }
      xhr.setRequestHeader('Content-Type', file.type);
      xhr.setRequestHeader('x-amz-acl', 'public-read');
      return xhr.send(file);
    };

    S3Upload.prototype.uploadFile = function(file) {
      var this_s3upload;
      this_s3upload = this;
      return this.executeOnSignedUrl(file, function(signedURL, publicURL) {
        return this_s3upload.uploadToS3(file, signedURL, publicURL);
      });
    };

    return S3Upload;

  })();

}).call(this);

（函数（）{
window.S3Upload=（函数（）{
S3Upload.prototype.s3_对象_名称='默认_名称'；
S3Upload.prototype.s3_sign_put_url='/signS3put'；
S3Upload.prototype.file_dom_选择器='file_upload'；
S3Upload.prototype.onfinish3put=函数（公共url）{
返回console.log（'base.onfinish3put（）'，public_url）；
};
S3Upload.prototype.onProgress=功能（百分比、状态）{
返回console.log（'base.onProgress（）'，百分比，状态）；
};
S3Upload.prototype.onError=功能（状态）{
返回console.log（'base.onError（）'，状态）；
};
功能S3上传（选项）{
if（options==null）options={}；
用于（选项中的选项）{
此[选项]=选项[选项]；
}
this.handleFileSelect（document.getElementById（this.file\u dom\u选择器））；
}
S3Upload.prototype.handleFileSelect=函数（文件元素）{
变量f、文件、输出、\u i、\u len、\u结果；
此.onProgress（0，'上载已开始'）；
files=file_element.files；
输出=[]；
_结果=[]；
对于（_i=0，_len=files.length；_i<_len；_i++）{
f=文件[_i]；
_push（这个.uploadFile（f））；
}
返回结果；
};
S3Upload.prototype.createCORSRequest=函数（方法，url）{
var-xhr；
xhr=newXMLHttpRequest（）；
if（xhr.withCredentials！=null）{
open（方法、url、true）；
}else if（XDomainRequest的类型！=“未定义”）{
xhr=新的XDomainRequest（）；
open（方法，url）；
}否则{
xhr=null；
}
返回xhr；
};
S3Upload.prototype.executeOnSignedUrl=函数（文件，回调）{
var本次上传，xhr；
this_s3upload=this；
xhr=newXMLHttpRequest（）；
xhr.open（'GET'，this.s3_sign_put_url+'？s3_object_type='+file.type+'&s3_object_name='+this.s3_object_name，true）；
xhr.overrideMimeType（'text/plain；charset=x-user-defined'）；
xhr.onreadystatechange=函数（e）{
var结果；
if（this.readyState==4&&this.status==200）{
试一试{
result=JSON.parse（this.responseText）；
}捕获（错误）{
this_s3upload.onError（'签名服务器返回了一些丑陋/空的JSON:“'+this.responseText+”）；
返回false；
}
返回回调（result.signed_请求，result.url）；
}else if（this.readyState==4&&this.status！==200）{
返回此\u s3upload.onError（'无法联系请求签名服务器。状态='+此状态）；
}
};
返回xhr.send（）；
};
S3Upload.prototype.uploadToS3=函数（文件、url、公共url）{
var本次上传，xhr；
this_s3upload=this；
xhr=this.createCORSRequest（'PUT'，url）；
如果（！xhr）{
这是验尸官（“不支持验尸官”）；
}否则{
xhr.onload=函数（）{
如果（xhr.status==200）{
此_s3upload.onProgress（100，“上载完成”）；
返回此\u s3upload.onfinish3put（公共\u url）；
}否则{
返回此\u s3upload.onError（'Upload error:'+xhr.status）；
}
};
xhr.onerror=函数（）{
返回此_s3upload.onError（'XHR error'）；
};
xhr.upload.onprogress=函数（e）{
已加载的var百分比；
if（如长度可计算）{
加载百分比=数学整轮（（加载/总计）*100）；
返回此_s3upload.onProgress（已加载百分比，已加载百分比==100？“正在完成”。：“正在上载”）；
}
};
}
setRequestHeader（'Content-Type'，file.Type）；
setRequestHeader（'x-amz-acl'，'public read'）；
返回xhr.send（文件）；
};
S3Upload.prototype.uploadFile=函数（文件）{
var此_s3upload；
this_s3upload=this；
返回此.executeOnSignedUrl（文件、函数（signedURL、publicURL）{
返回此\u s3upload.uploadToS3（文件、签名URL、公共URL）；
});
};
返回并上传；
})();
}).打电话（这个）；

您可以在客户端或服务器端设置文件名

客户端：在events-create.ejs中，将此参数传递给S3Upload：

s3_object_name: $('input[type=file]').val().match(/[^\/\\]+$/)[0]

---

服务器端（首选方法）：在routes.js中，用唯一的文件名替换

req.query.s3\u object\u name

的所有实例。您可以使用

req.query.s3\u object\u type

来确定文件名末尾的扩展名。您希望在此处使用唯一的文件名，因为所有内容都存储在同一个存储桶中，AWS会自动覆盖具有相同文件名的文件。

我遇到了相同的问题，我在我的节点控制器中就是这样解决的：

aws.config.update({accessKeyId: AWS_ACCESS_KEY, secretAccessKey: AWS_SECRET_KEY});
    var s3 = new aws.S3();

    // Set Extension
    switch(req.query.s3_object_type) {
        case 'image/png': 
            var ext = '.png';
        break;
        case 'image/gif':
            var ext = '.gif';
        break;
        case 'image/jpg': 
        case 'image/jpeg':
            var ext = '.jpg';
        break;
    }

    // Rename File
    var name = Math.floor(new Date() / 1000);

    // Set S3
    var s3_params = {
        Bucket: S3_BUCKET,
        Key: 'blog/'+name+ext,
        Expires: 60,
        ContentType: req.query.s3_object_type,
        ACL: 'public-read'
    };

    // Send S3
    s3.getSignedUrl('putObject', s3_params, function(err, data){
        if(err){
            console.log(err);
        }
        else{
            var return_data = {
                signed_request: data,
                url:   'https://'+S3_BUCKET+'.s3.amazonaws.com/'+name+ext
            };
            res.write(JSON.stringify(return_data));
            res.end();
        }
    });

因此，您可以看到一个非常简单的问题解决方案，只需检查扩展名并重命名文件。希望这有帮助

s3_object_name: $('input[type=file]').val().match(/[^\/\\]+$/)[0]

aws.config.update({accessKeyId: AWS_ACCESS_KEY, secretAccessKey: AWS_SECRET_KEY});
    var s3 = new aws.S3();

    // Set Extension
    switch(req.query.s3_object_type) {
        case 'image/png': 
            var ext = '.png';
        break;
        case 'image/gif':
            var ext = '.gif';
        break;
        case 'image/jpg': 
        case 'image/jpeg':
            var ext = '.jpg';
        break;
    }

    // Rename File
    var name = Math.floor(new Date() / 1000);

    // Set S3
    var s3_params = {
        Bucket: S3_BUCKET,
        Key: 'blog/'+name+ext,
        Expires: 60,
        ContentType: req.query.s3_object_type,
        ACL: 'public-read'
    };

    // Send S3
    s3.getSignedUrl('putObject', s3_params, function(err, data){
        if(err){
            console.log(err);
        }
        else{
            var return_data = {
                signed_request: data,
                url:   'https://'+S3_BUCKET+'.s3.amazonaws.com/'+name+ext
            };
            res.write(JSON.stringify(return_data));
            res.end();
        }
    });