使用改造2将图片上传到服务器

时间:2017-08-15 20:03:36

标签: android-studio retrofit2 okhttp3

首先让我们看一下代码:

public interface ApiInterface {
    @Multipart
    @POST("my/files/photo/")
    Call<FileUploadResponse> uploadPhoto(@Header("authorization") String auth,
                                     @Part MultipartBody.Part file,
                                     @Part("file-type") RequestBody fileType);
}

我这样调用这个界面:

RequestBody body = RequestBody.create(MediaType
            .parse(getContentResolver().getType(fileUri)), file);
MultipartBody.Part avatarBody = MultipartBody.Part
            .createFormData(data, file.getName(), body);
RequestBody fileType = RequestBody.create(
            MediaType.parse("text/plain"), "profile");
client.uploadPhoto(getToken(), avatarBody, fileType);

从服务器i获得响应&#34;文件类型未提供&#34;。如果我在uploadPhoto函数上更改文件和文件类型的位置,如下所示:

@Multipart
@POST("my/files/photo/")
Call<FileUploadResponse> uploadPhoto(@Header("authorization") String auth,
                                 @Part("file-type") RequestBody fileType
                                 @Part MultipartBody.Part file);

我收到回复&#34;文件未提供&#34;。 我用自己编写的JS代码检查了服务器:

&#13;
&#13;
<!DOCTYPE html>
<script language="JavaScript" type="text/javascript" src="C://Users/User/Downloads/jquery-3.2.1.min.js"></script>

<form action="">
  <input type="text" name="authorize" id="authorize">
  <br>
  <input type="file" name="photo" accept="image/*" id="filechooser" onchange="onFileChange(this)" >
  <br>
  <input value="profile" type="text" name="file-type" id="type">
  <br>
  <input type="button" onclick="uploadFile()">
</form>


<script>
var blobFile;
function onFileChange(ss) {
	blobFile = ss.files[0];
	alert(blobFile);
}
function uploadFile() {

	var storedJWT = $('#authorize').val();
	var fileType = $('#type').val();
    var formData = new FormData();
    formData.append("file-type", fileType);
	formData.append("photo", blobFile);
	console.log(storedJWT);
    $.ajax({
       url: "url",
       type: "POST",
       data: formData,
	   headers: {
        authorization: storedJWT
	   },
       processData: false,
       contentType: false,
       success: function(response) {
		   console.log(response);
       },
       error: function(jqXHR, textStatus, errorMessage) {
           console.log(errorMessage);
       }
    });
}</script>
&#13;
&#13;
&#13;

一切正常。关于JS生成请求的脚本如下:

Accept:*/*
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8
authorization:JWT token
Connection:keep-alive
Content-Length:67601
Content-Type:multipart/form-data; boundary=----
WebKitFormBoundary3MtpMA70hG41luF1
Host:localhost
------WebKitFormBoundary3MtpMA70hG41luF1
Content-Disposition: form-data; name="file-type"

profile
------WebKitFormBoundary3MtpMA70hG41luF1
Content-Disposition: form-data; name="photo"; filename="1231231313.jpg"
Content-Type: image/jpeg


------WebKitFormBoundary3MtpMA70hG41luF1--

并且改装请求是:

Content-Type: multipart/form-data; boundary=238182ad-d99c-4d44-9ba6-7d178a14b2e9
Content-Length: 59776
authorization: JWT token
--238182ad-d99c-4d44-9ba6-7d178a14b2e9
Content-Disposition: form-data; name="photo"; filename="1502703422332.jpg"
Content-Type: image/jpeg
Content-Length: 59369
//bytes
--238182ad-d99c-4d44-9ba6-7d178a14b2e9
Content-Disposition: form-data; name="file-type"
Content-Transfer-Encoding: binary
Content-Type: text/plain; charset=utf-8
Content-Length: 7
profile
--238182ad-d99c-4d44-9ba6-7d178a14b2e9--

我无法理解错误在哪里......

1 个答案:

答案 0 :(得分:0)

经过多次搜索后,我发现服务器没有处理像

这样的标题
Content-Transfer-Encoding: binary
Content-Type: text/plain; charset=utf-8

我必须从我的请求中删除这些标头。解决方案是在我的API接口中创建上传功能,如下所示:

@POST("my/files/photo/")
    Call<FileUploadResponse> uploadPhoto(@Header("Content-Type") String contentType,
                                          @Header("Authorization") String auth,
                                          @Body MultipartBody body);

并将此函数称为:

ApiClient.ApiInterface client = ApiClient.getClient();
File file = new File(getPathFromUri(fileUri));
RequestBody fileBody = RequestBody.create(MediaType.parse(getContentResolver().getType(fileUri)), file);
MultipartBody body = new MultipartBody.Builder().addFormDataPart("file-type", "profile")
                .addFormDataPart("photo", "image.png", fileBody)
                .build();
client.uploadPhoto("multipart/form-data; boundary=" + body.boundary(),
                    PrefManager.getInstance().getToken(), body);

结果我收到以下请求:

Content-Type: multipart/form-data; boundary=27ec8d66-d29d-48aa-a2fe-08c6664b10c7
Content-Length: 56412
Authorization: JWT token
--27ec8d66-d29d-48aa-a2fe-08c6664b10c7
Content-Disposition: form-data; name="file-type"
Content-Length: 7
profile
--27ec8d66-d29d-48aa-a2fe-08c6664b10c7
Content-Disposition: form-data; name="photo"; filename="image.png"
Content-Type: image/jpeg
Content-Length: 56089
/* bytes */
--27ec8d66-d29d-48aa-a2fe-08c6664b10c7--

它运作正常。