web-services - 上传图片，转换为base64并发送到jersey

Question

我正在编写 Web 应用程序，其中前端将写在 html、backbone.js 上，后端写在球衣上。我的html表单中有很多图片上传（输入类型=“文件”）和文本数据（输入类型=“文本”）。我必须在一个请求中将所有这些（图像和纯文本）上传到泽西岛服务器。

我读到只有当我将图像转换为 Base64 格式时，我才能在一个请求中将带有文本数据的图像发送到服务器。

是否可以将通过 html 表单上传的图像转换为 base64 格式，然后将所有数据发送到球衣？

预先感谢 ：）

Answer 1

我对泽西岛没有任何经验，但我知道这将适用于其他后端。file_name在此示例中，您的模型将作为和发布到服务器图像数据file_data。您将需要在后端解码图像。下面的前端代码利用了FileReader API。它不适用于 IE < 10。

var model = Backbone.Model.extend({
  readFile : function (file, callback) {
    var reader = new FileReader();
    reader.onload = (function (theFile, self) {
      return function (e) {
        self.set({file_name: theFile.name, file_data : e.target.result});
        _.isUndefined(callback) ? null : callback();
      };
    })(file, this);

    reader.readAsDataURL(file);
  }
});

var view = Backbone.View({
  //...
  onRender : function () {
    var self = this,
      fileChangeHandler = function (e) {
      var callback = function () {
        self.model.save({}, {});
      };
      var file = e.originalEvent.target.files[0];
      self.model.readFile(file, callback);
    };
    self.$("input[type='file']").change(fileChangeHandler);
  }
});

Answer 2

您会以表格的形式将多个文本和图像发布到球衣上吗？

html代码：

<form action="rest/test" method="post" enctype="multipart/form-data">
    <input type="text" name="text1" /> <br />
    <input type="file" name="file1" /> <br />
    <input type="text" name="text2" /> <br />
    <input type="file" name="file2" /> <br />
    <input type="submit" value="Submit" />
</form>

球衣代码：

@Path("/test")
public class TestResource {

    public TestResource() {
    }

    @POST
    @Consumes("multipart/form-data")
    public Response create(
            @FormDataParam("text1") String text1,
            @FormDataParam("file1") InputStream file1,
            @FormDataParam("text2") String text2,
            @FormDataParam("file2") InputStream file2) {

        //get your data

        return Response.ok().build();
    }
}