我有一个REST web服务,目前公开这个URL:

http://server/data/media

用户可以POST以下JSON:

{
    "Name": "Test",
    "Latitude": 12.59817,
    "Longitude": 52.12873
}

来创建一个新的媒体元数据。

现在我需要能够在上传媒体元数据的同时上传文件。最好的办法是什么?我可以引入一个名为file的新属性,并用base64对文件进行编码,但我想知道是否有更好的方法。

还有使用多部分/表单数据,就像HTML表单会发送的那样,但我使用的是REST web服务,如果可能的话,我想坚持使用JSON。


当前回答

我不明白为什么在过去的八年中,没有人给出一个简单的答案。与其将文件编码为base64,不如将json编码为字符串。然后在服务器端解码json。

在Javascript中:

let formData = new FormData();
formData.append("file", myfile);
formData.append("myjson", JSON.stringify(myJsonObject));

POST使用Content-Type: multipart/form-data

在服务器端,正常检索文件,并以字符串的形式检索json。将字符串转换为对象,无论使用何种编程语言,通常都是一行代码。

(是的,效果很好。在我的一个应用程序中。)

其他回答

我同意Greg的观点,两阶段方法是一个合理的解决方案,但我会反过来做。我会这样做:

POST http://server/data/media
body:
{
    "Name": "Test",
    "Latitude": 12.59817,
    "Longitude": 52.12873
}

创建元数据条目并返回如下响应:

201 Created
Location: http://server/data/media/21323
{
    "Name": "Test",
    "Latitude": 12.59817,
    "Longitude": 52.12873,
    "ContentUrl": "http://server/data/media/21323/content"
}

然后客户端可以使用这个ContentUrl并对文件数据执行PUT操作。

这种方法的好处是,当您的服务器开始被巨大的数据量压垮时,您返回的url可以指向其他具有更大空间/容量的服务器。或者,如果带宽是个问题,您可以实现某种轮询方法。

基于ccleve的回答,如果你正在使用superagent / express / multer,在前端构建你的多部分请求,这样做:

superagent
    .post(url)
    .accept('application/json')
    .field('myVeryRelevantJsonData', JSON.stringify({ peep: 'Peep Peep!!!' }))
    .attach('myFile', file);

cf https://visionmedia.github.io/superagent/ multipart-requests。

在快速端,作为字段传递的任何内容都将以req结束。做后的身体:

app.use(express.json({ limit: '3MB' }));

你的路线应该包括这样的内容:

const multerMemStorage = multer.memoryStorage();
const multerUploadToMem = multer({
  storage: multerMemStorage,
  // Also specify fileFilter, limits...
});

router.post('/myUploads',
  multerUploadToMem.single('myFile'),
  async (req, res, next) => {
    // Find back myVeryRelevantJsonData :
    logger.verbose(`Uploaded req.body=${JSON.stringify(req.body)}`);

    // If your file is text:
    const newFileText = req.file.buffer.toString();
    logger.verbose(`Uploaded text=${newFileText}`);
    return next();
  },
  ...

但是有一件事要记住,这是来自multer文档的关于磁盘存储的说明:

注意req。尸体可能还没被填满。这取决于客户端向服务器传输字段和文件的顺序。

我猜这意味着它将是不可靠的,比如说,计算基于json元数据的目标dir/filename沿文件传递

我不明白为什么在过去的八年中,没有人给出一个简单的答案。与其将文件编码为base64,不如将json编码为字符串。然后在服务器端解码json。

在Javascript中:

let formData = new FormData();
formData.append("file", myfile);
formData.append("myjson", JSON.stringify(myJsonObject));

POST使用Content-Type: multipart/form-data

在服务器端,正常检索文件,并以字符串的形式检索json。将字符串转换为对象,无论使用何种编程语言,通常都是一行代码。

(是的,效果很好。在我的一个应用程序中。)

如果您的文件及其元数据创建了一个资源,那么在一个请求中上传它们是完全没问题的。请求示例如下:

POST https://target.com/myresources/resourcename HTTP/1.1

Accept: application/json

Content-Type: multipart/form-data; 

boundary=-----------------------------28947758029299

Host: target.com

-------------------------------28947758029299

Content-Disposition: form-data; name="application/json"

{"markers": [
        {
            "point":new GLatLng(40.266044,-74.718479), 
            "homeTeam":"Lawrence Library",
            "awayTeam":"LUGip",
            "markerImage":"images/red.png",
            "information": "Linux users group meets second Wednesday of each month.",
            "fixture":"Wednesday 7pm",
            "capacity":"",
            "previousScore":""
        },
        {
            "point":new GLatLng(40.211600,-74.695702),
            "homeTeam":"Hamilton Library",
            "awayTeam":"LUGip HW SIG",
            "markerImage":"images/white.png",
            "information": "Linux users can meet the first Tuesday of the month to work out harward and configuration issues.",
            "fixture":"Tuesday 7pm",
            "capacity":"",
            "tv":""
        },
        {
            "point":new GLatLng(40.294535,-74.682012),
            "homeTeam":"Applebees",
            "awayTeam":"After LUPip Mtg Spot",
            "markerImage":"images/newcastle.png",
            "information": "Some of us go there after the main LUGip meeting, drink brews, and talk.",
            "fixture":"Wednesday whenever",
            "capacity":"2 to 4 pints",
            "tv":""
        },
] }

-------------------------------28947758029299

Content-Disposition: form-data; name="name"; filename="myfilename.pdf"

Content-Type: application/octet-stream

%PDF-1.4
%
2 0 obj
<</Length 57/Filter/FlateDecode>>stream
x+r
26S00SI2P0Qn
F
!i\
)%!Y0i@.k
[
endstream
endobj
4 0 obj
<</Type/Page/MediaBox[0 0 595 842]/Resources<</Font<</F1 1 0 R>>>>/Contents 2 0 R/Parent 3 0 R>>
endobj
1 0 obj
<</Type/Font/Subtype/Type1/BaseFont/Helvetica/Encoding/WinAnsiEncoding>>
endobj
3 0 obj
<</Type/Pages/Count 1/Kids[4 0 R]>>
endobj
5 0 obj
<</Type/Catalog/Pages 3 0 R>>
endobj
6 0 obj
<</Producer(iTextSharp 5.5.11 2000-2017 iText Group NV \(AGPL-version\))/CreationDate(D:20170630120636+02'00')/ModDate(D:20170630120636+02'00')>>
endobj
xref
0 7
0000000000 65535 f 
0000000250 00000 n 
0000000015 00000 n 
0000000338 00000 n 
0000000138 00000 n 
0000000389 00000 n 
0000000434 00000 n 
trailer
<</Size 7/Root 5 0 R/Info 6 0 R/ID [<c7c34272c2e618698de73f4e1a65a1b5><c7c34272c2e618698de73f4e1a65a1b5>]>>
%iText-5.5.11
startxref
597
%%EOF

-------------------------------28947758029299--

我知道这是一个非常古老的问题,但希望这能帮助其他人,因为我看到这篇文章也是为了寻找同样的东西。我有一个类似的问题,只是我的元数据是一个Guid和int。解决方法是一样的。您可以将所需的元数据作为URL的一部分。

在你的“Controller”类中的POST接受方法:

public Task<HttpResponseMessage> PostFile(string name, float latitude, float longitude)
{
    //See http://stackoverflow.com/a/10327789/431906 for how to accept a file
    return null;
}

然后在你注册路由的地方,WebApiConfig。在这种情况下为我注册(HttpConfiguration配置)。

config.Routes.MapHttpRoute(
    name: "FooController",
    routeTemplate: "api/{controller}/{name}/{latitude}/{longitude}",
    defaults: new { }
);