文档中心 > 店铺动态卡片-开发指引

PC 千牛上传文件使用说明

更新时间:2021/05/19 访问次数:6151

鉴于经常有开发者咨询上传链路不通,对此 my.uploadFile 做详细说明。

 

协议说明

通过 my.uploadFile 发送给服务器的报文内容,本质上是一个 multipart/form-data 表单。

 

可通过下面这个简单的网页来模拟:

<form action="服务端地址" method="post" enctype="multipart/form-data"> 
<input type="file" name="file" id="file">
<input type="submit" value="upload">
</form>

如果您在使用 API 时遇到问题,建议先使用这个网页来排查服务端能否正常接收。

 

注意事项

  • my.uploadFile 这个 API 有域名白名单管控,请到相关后台申请。请注意,并不是所有阿里系域名都在白名单内。如果您遇到返回“no permission”之类的错误信息,那就说明您访问的域名需要申请白名单。
  • 服务器地址请使用 https,目前仍然兼容 http,但按照规划未来会强制 https。目前仍然在使用 http 的,请尽快切换,以免将来业务受到影响。
  • 不要指定 Content-Type header,客户端会生成 Content-Type header: multipart/form-data; boundary=...

 

示例代码

my.uploadFile({
url: 'http://www.xxx.com/upload_receiver',
fileType: 'image',
fileName: 'uploaded_file',
filePath: '<filePath>', // 伪路径,由其他 API 获取(如my.chooseImage)
header: {
test_header: 'test_value', // 非标准header,客户端会发送,能否处理取决于服务端
origin: 'origin', // 标准header
},
formData: {
test_key: 'test_data',
},
complete: (res) => {
console.log(res);
},
});

 

它会产生一个 multipart/form-data 表单,HTTP 报文如下:

POST /upload_receiver HTTP/1.1
Host: www.xxx.com
Connection: keep-alive
Content-Length: 250832
Content-Type: multipart/form-data;
boundary=----WebKitFormBoundaryyp7ENyhCrRrAdt2C
origin: origin
test_header: test_value

------WebKitFormBoundaryyp7ENyhCrRrAdt2C
Content-Disposition: form-data;
name="test_key"

test_data

------WebKitFormBoundaryyp7ENyhCrRrAdt2C
Content-Disposition: form-data;
name="file";
filename="uploaded_file"
Content-Type: image

<...binary...>
------WebKitFormBoundaryyp7ENyhCrRrAdt2C--

 

API callback 结果:(上述示例代码中 res 的值)

{
"statusCode":200,
"success":true,
"status_text":"",
"data":"<response_data>",
"header":{
"Connection":"keep-alive",
"Content-Type":"text/html; charset=UTF-8",
...
}
}

 

FAQ

关于此文档暂时还没有FAQ
返回
顶部