whatshot虎绿林附件前端表单直传API

@Ta 08-04 23:08发布,08-05 05:19修改 1152点击

基本概念

[虎绿林API] 云存储文件上传API一帖中描述了通过虎绿林web服务器中转的方式上传文件到云存储(目前是阿里云OSS)的方法,但是该方法最大的缺点就是太慢了。

虎绿林web服务器带宽为5Mbps,所以最高上传速度约为640KB/s。但是如果能直接上传到云存储服务器(比如阿里云OSS),就可以达到数MB/s。

所以我们提供了帮助web应用程序和网页插件直接上传到云存储服务器的接口,以及web上传程序的参考实现。

参考实现:

 [网页插件]🚀图文快贴阿里云OSS直传版

表单直传步骤:

  1. 要求用户选择文件。
  2. 获得文件的文件名和大小。
  3. 计算文件的md5值(可选)。
  4. 请求以下接口获取上传表单模板(参数name size md5可通过GETPOST方式发送):
https://hu60.cn/q.php/api.upload-form.json?name=文件名&size=文件大小&md5=文件md5值

如未计算文件的md5值,则省略md5参数:

https://hu60.cn/q.php/api.upload-form.json?name=文件名&size=文件大小

请求将得到如下结果:

{
  // 文件是否存在,为true则表示文件存在,不需要再上传
  "fileExists": false,

  // 上传请求地址
  "requestUrl": "https://hu60cn.oss-cn-beijing.aliyuncs.com",

  // 上传请求类型
  "method": "POST",

  // 上传请求的Content-Type
  "enctype": "multipart/form-data",

  // 上传请求表单的内容,应该原样提交这些内容到服务器,
  // 不要试图解析里面的字段,因为字段随时可能会改变
  "formData": {
    "a":"b", "c":"d", ...
  },

  // 文件字段的名称
  // 需要添加到 formData 中,内容是你要上传的文件
  "fileFieldName": "file",

  // 如果上传成功,可用该URL下载文件
  "downloadUrl": "http://file.hu60.cn/file/hash/jpg/000000000000cbb1d8a881638d9522f6333.jpg?attname=tiger.jpg",

  // 如果上传成功,可将其添加到编辑框中
  "contentUbb": "《图片:http://file.hu60.cn/file/hash/jpg/000000000000cbb1d8a881638d9522f6333.jpg?attname=tiger.jpg,tiger.jpg》"
}
  1. 若上述API给出"fileExists": false,按API给出的形式发起上传请求即可。若上传请求得到2xx响应,则上传成功,使用API给出的downloadUrl作为附件下载地址。注意:如果你上传的文件大小或MD5与请求API时提供的不符,上传会失败。

  2. 若API给出"fileExists": true,则无需再上传,直接使用downloadUrl作为附件下载地址。

API返回值类型参考

  1. 文件不存在,可上传
    https://hu60.cn/q.php/api.upload-form.json?name=tiger.jpg&size=333&md5=000000000000cbb1d8a881638d9522f6

  2. 未计算文件的md5值,随机生成文件名,总是可上传
    https://hu60.cn/q.php/api.upload-form.json?name=tiger.jpg&size=333

  3. 文件存在,无需上传
    https://hu60.cn/q.php/api.upload-form.json?name=test.png&size=2038619&md5=3293d6cd825b9d90b92b831224509d44

  4. 文件超过5GB,无法通过表单上传,得到虎绿林标准异常
    https://hu60.cn/q.php/api.upload-form.json?name=tiger.jpg&size=333333333333&md5=000000000000cbb1d8a881638d9522f6

  5. 忘记给出文件名,得到虎绿林标准异常
    https://hu60.cn/q.php/api.upload-form.json?size=2038619&md5=3293d6cd825b9d90b92b831224509d44

  6. 忘记给出文件大小,得到虎绿林标准异常
    https://hu60.cn/q.php/api.upload-form.json?name=tiger.png&md5=3293d6cd825b9d90b92b831224509d44

  7. MD5格式不正确,得到虎绿林标准异常
    https://hu60.cn/q.php/api.upload-form.json?name=tiger.png&size=2038619&md5=3293d6cd825b9d90b92b8312245

回复列表(10)
  • @Ta / 08-05 00:48
    @水木易安@胡椒舰长,API做好了,上传程序的参考实现也做好了
  • @Ta / 08-05 08:38

    厉害👍🏻👍🏻👍🏻👍🏻
    http://www.chengyao.xyz

  • @Ta / 08-05 11:00

    @老虎会游泳效率真快
    各大客户端安排
    小米MIX2s(白)

  • @Ta / 08-05 11:15
    小米MIX2s(白)
  • @Ta / 08-05 12:21

    php可以做物联网开发吗
    红米Note4高配版(银色)

  • @Ta / 08-05 12:40
  • @Ta / 08-05 14:37

    @张小强,我觉得php不适合物联网开发

  • @Ta / 08-05 14:51
    支持支持
  • @Ta / 08-05 15:00
    @张小强,物联网开发,最底层TCP/udp,目前来看我觉得是可以的
  • @Ta / 09-14 17:10
    这是我分装的 批量说上传到OSS的子组件,应该在父组件引入掉用


    image.png


    文件:

    com-upload-image.nvue(8.79 KB)


    ## 实例

    	<view class="comment_textarea" >
    				<com-upload-image :name="uploadImage.fileFieldName" :url="uploadImage.url" :extraData="uploadImage.extraData" @onUploaded="onUploaded" :HookBeforeUpload="HookBeforeUpload"></com-upload-image>
    			</view>
    


    	HookBeforeUpload(Index,Imgs){
    				return new Promise((resolve,reject)=>{
    					let img=Imgs[Index];
    					
    					let fileName=img.local_path.substring(img.local_path.lastIndexOf("/")+1);
    					if(fileName==null || fileName==""){
    						fileName="img_"+Math.random().toString();
    					}
    					
    					let reqUri=`api.upload-form.json?name=${fileName}&size=${img.fileSize}`;
    					this.$req.accessPost(reqUri).then(res=>{
    						//if file exist ,must not upload
    						if(res.fileExists==true){
    							//res.downloadUrl; the exist file url,
    							reject(new Exception('文件已经存在云端,请勿重复上传!'));
    						}
    						//set upload address,token,filename. resolve this process,then exec upload
    						this.uploadImage.url=res.requestUrl;
    						this.uploadImage.extraData=res.formData
    						this.uploadImage.fileFieldName=res.fileFieldName;
    						resolve({});
    					}).catch(err=>{
    						//http请求生成token异常
    						reject(err);
    					});
    				});
    			},
    
添加新回复
回复需要登录

[聊天-摸鱼] 姜辰:所有单位在干活,而我在一边摸鱼