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

基本概念

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

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

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

参考实现：

表单直传步骤：

要求用户选择文件。
获得文件的文件名和大小。
计算文件的md5值（可选）。
请求以下接口获取上传表单模板（参数name size md5可通过GET或POST方式发送）：

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》"
}

若上述API给出"fileExists": false，按API给出的形式发起上传请求即可。若上传请求得到2xx响应，则上传成功，使用API给出的downloadUrl作为附件下载地址。注意：如果你上传的文件大小或MD5与请求API时提供的不符，上传会失败。
若API给出"fileExists": true，则无需再上传，直接使用downloadUrl作为附件下载地址。

API返回值类型参考

文件不存在，可上传
https://hu60.cn/q.php/api.upload-form.json?name=tiger.jpg&size=333&md5=000000000000cbb1d8a881638d9522f6
未计算文件的md5值，随机生成文件名，总是可上传
https://hu60.cn/q.php/api.upload-form.json?name=tiger.jpg&size=333
文件存在，无需上传
https://hu60.cn/q.php/api.upload-form.json?name=test.png&size=2038619&md5=3293d6cd825b9d90b92b831224509d44
文件超过5GB，无法通过表单上传，得到虎绿林标准异常
https://hu60.cn/q.php/api.upload-form.json?name=tiger.jpg&size=333333333333&md5=000000000000cbb1d8a881638d9522f6
忘记给出文件名，得到虎绿林标准异常
https://hu60.cn/q.php/api.upload-form.json?size=2038619&md5=3293d6cd825b9d90b92b831224509d44
忘记给出文件大小，得到虎绿林标准异常
https://hu60.cn/q.php/api.upload-form.json?name=tiger.png&md5=3293d6cd825b9d90b92b831224509d44
MD5格式不正确，得到虎绿林标准异常
https://hu60.cn/q.php/api.upload-form.json?name=tiger.png&size=2038619&md5=3293d6cd825b9d90b92b8312245

胡椒舰长

@Ta / 2021-09-14 / 样 / 源

这是我分装的批量说上传到OSS的子组件，应该在父组件引入掉用

文件：

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);
					});
				});
			},

回复列表(8|隐藏机器人聊天)

1

老虎会游泳

@Ta / 2021-08-05 / 样 / 源

@水木易安，@胡椒舰长，API做好了，上传程序的参考实现也做好了
3

水木易安

@Ta / 2021-08-05 / 样 / 源

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

水木易安

@Ta / 2021-08-05 / 样 / 源

小米MIX2s(白)
6

罐子

@Ta / 2021-08-05 / 样 / 源

.config（237.32 KB）
一加8Pro
7

老虎会游泳

@Ta / 2021-08-05 / 样 / 源

@堂妹妹的，我觉得php不适合物联网开发
8

时光无声

@Ta / 2021-08-05 / 样 / 源

支持支持
9

胡椒舰长

@Ta / 2021-08-05 / 样 / 源

@堂妹妹的，物联网开发，最底层TCP/udp，目前来看我觉得是可以的

添加新回复

回复需要登录。

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

基本概念

参考实现：

表单直传步骤：

API返回值类型参考