相关疑难解决方法(0)

当我提交一个附加文件的简单表格时:

<form enctype="multipart/form-data" action="http://localhost:3000/upload?upload_progress_id=12344" method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
Choose a file to upload: <input name="uploadedfile" type="file" /><br />
<input type="submit" value="Upload File" />
</form>

它是如何在内部发送文件的？该文件是作为数据发送的HTTP主体的一部分吗？在此请求的标头中,我没有看到与文件名相关的任何内容.

我只是想知道发送文件时HTTP的内部工作原理.

我仍然试图绕过它.

我可以让用户通过文件输入选择文件(甚至多个):

<form>
  <div>
    <label>Select file to upload</label>
    <input type="file">
  </div>
  <button type="submit">Convert</button>
</form>

我可以submit使用这个事件<fill in your event handler here>.但是一旦我这样做,我该如何使用该文件发送fetch？

fetch('/files', {
  method: 'post',
  // what goes here? What is the "body" for this? content-type header?
}).then(/* whatever */);

以下代码按预期工作.在Google Chrome上打开" https://wiki.epfl.ch/ " 页面,然后在Developer Console上执行此代码.注意:页面" https://wiki.epfl.ch/test.php "不存在,因此无法加载,但这不是问题.

response = await fetch(""https://wiki.epfl.ch/lapa-studio/documents/DTS/laser%20tutorial.pdf"");
response.text().then(function(content) { 
  formData = new FormData();
  console.log(content.length);
  console.log(content);
  formData.append("content", content);

  fetch("https://wiki.epfl.ch/test.php", {method: 'POST', body: formData});
})

它记录:

content.length: 57234
content: %PDF-1.3
%?????????
4 0 obj
<< /Length 5 0 R /Filter /FlateDecode >>
stream
x??K??F?????;¢?
...

转到Developer Network选项卡,选择'test.php'页面,导航到"Requested payload:",您可以看到以下内容:

------WebKitFormBoundaryOJOOGb7N43BxCRlv
Content-Disposition: form-data; name="content"

%PDF-1.3
%?????????
4 0 obj
<< /Length 5 0 R /Filter /FlateDecode >>
stream
...
------WebKitFormBoundaryOJOOGb7N43BxCRlv

问题是请求文件是二进制文件(PDF),文本被"损坏".当实际文件大小(使用wget命令获取)为60248字节时,它报告大小为57234字节.

问题是:如何获取和发送二进制数据,而不进行修改？

我试着更换response.text()的response.blob(),如下: …

我使用Amazon Web Service S3上传和存储我的文件.我使用AWS Sdk为Node.js服务器端生成一个预先签名的URL,以便通过此预先签名的URL直接从浏览器上传文件.

这个怎么运作

服务器端我有一个方法返回预先签名​​的URL.

AWS.config.loadFromPath(__dirname + '/../properties/aws-config.json');
AWS.config.region = 'eu-west-1';
//Credentials are loaded

var s3 = new AWS.S3();
var docId = req.query.doc;
var params = {
    Bucket: res.locals.user.bucketId, 
    Key: docId+"."+req.query.fileExtension, 
    ACL : "bucket-owner-read", 
    ContentType : req.query.fileType
};
s3.getSignedUrl('putObject', params, function (err, url) {
    if(url){
        res.writeHead(200);
        var result = {
            AWSUrl : url
        };
        //Generates pre signed URL with signature param
        res.end(JSON.stringify(result));
    }
}

我直接将我的文件上传到S3客户端

var loadToAWSS3 = function(url, file, inputFileId){
    var data = new FormData();
    data.append('file', file); …

我的html代码

<form  method="post" enctype="multipart/form-data" ng-controller="commentCtrl" name="form">
        <a href="" type="file" class="custom-height"><img src="source/assets/images/icons/icofileattached.png" class="attachmentpng-height"  ngf-select="uploadFiles($file)" ng-model="files"/></a>
        <md-button type="submit" class="md-raised custom-submit-button" ng-click="MakeComments()"> SUBMIT </md-button>
        </form>

谢谢你的帮助

我使用具有多个上传属性的单个文件输入字段。我已经测试过这样的单文件传递并且它有效。现在我正在尝试使用数组传递文件，但有一个错误。没有形式。

HTML：

<input id="fileInfo" name="userfile[]" type="file" multiple>

JS：

var formData = new FormData();
var files = [];
for(var i = 0; i < length; i++) {
    files[i] = $('input', '#fileInfo')[0].files[i];
}
formData.append('userfile', files);
$.ajax({
    url: "example.php",
    data: formData,
    type: 'POST',
    dataType: 'json',
    processData: false,
    contentType: false,
    success: function(res)
    {
        console.log("done");
    }
});

PHP：

<?php
$length = sizeof($_FILES['userfile']['name']);
json_encode(array($length));

错误日志：

PHP Notice:  Undefined index: userfile in /path/to/php on line 2, referer: http://localhost/test