鸿蒙NEXT开发笔记（三十一）仿抖音快手App的把视频上传到服务器-CSDN博客

上一节我们结合堆叠布局和进度条组件实现了弹窗等待功能，接下来就是怎么向服务器上传视频文件了。
上传功能用到了request模块，该模块给应用提供上传下载文件、后台代理传输的基础功能，常见方法如下：
downloadFile：创建并启动一个下载任务。
uploadFile：创建并启动一个上传任务。
对于uploadFile方法来说，关键是传入request.UploadConfig类型的上传配置信息。UploadConfig类型的常用字段说明如下：
url：资源地址，即服务器的上传地址。
header：添加要包含在上传请求中的HTTP或HTTPS标志头。
method：HTTP请求方法。对于上传操作填POST即可。
files：要上传的文件列表。
data：请求的表单数据。
在上述的字段信息中，待提交的文本信息放在data字段，而待上传的文件信息放在files字段。其中data字段为Array<RequestData>类型，即键值对数组；files字段为Array<File>类型，注意这个File不是fileIo工具中的File，而是request模块的File，即request.File类型。request.File类型的常用字段说明如下：
filename：multipart提交时，请求头中的文件名。
name：multipart提交时，表单项目的名称，默认为file。
uri：文件的本地存储路径。仅支持"internal://cache/"，且文件必须放在沙箱路径的cache目录。
type：文件的内容类型，默认根据文件名或路径的后缀获取。
就上传短视频而言，除了视频的标题、描述、拍摄时间、拍摄地点等文本信息之外，还要上传视频文件及其封面图片。
调用uploadFile方法会异步返回上传任务UploadTask对象，监听任务对象的progress事件，可实时获取上传进度；监听任务对象的complete事件，可获取上传完成通知。于是编写上传文件的框架代码如下所示：

let uploadTask: request.UploadTask; // 上传任务
// 请求上传本地文件
request.uploadFile(this.context, config).then(data => {
  uploadTask = data;
  // 订阅上传完成事件
  uploadTask.on('complete', () => {
    callback(0, '') // 回调通知上传成功
  })
}).catch((err: BusinessError) => {
  callback(-1, JSON.stringify(err)) // 回调通知上传失败
})

接着补充UploadConfig类型的上传配置信息，主要给data字段填写待提交的文本信息，给files字段填写待上传的文件信息，那么整合之后的短视频上传代码示例如下：

// 上传短视频
upload(callback: (result: number, error: string) => void) {
  let imageFileName = this.imagePath.toString().split('/').pop() as string
  let imageSuffix = imageFileName.split('.').pop() as string
  // 注意：图片文件必须放在沙箱路径的cache目录
  let imageRealPath = 'internal://cache/' + imageFileName
  // 待上传的视频封面图片
  let imageFile: request.File = { filename: imageFileName,
    name: `image`, uri: imageRealPath, type: 'image/'+imageSuffix }

  let videoFileName = this.videoPath.toString().split('/').pop() as string
  let videoSuffix = videoFileName.split('.').pop() as string
  // 注意：视频文件必须放在沙箱路径的cache目录
  let videoRealPath = 'internal://cache/' + videoFileName
  // 待上传的视频文件
  let videoFile: request.File = { filename: videoFileName,
    name: `video`, uri: videoRealPath, type: 'video/'+videoSuffix }

  // 设定上传配置
  let config: request.UploadConfig = {
    method: 'POST', // 请求方式
    url: this.url, // 请求地址
    header: { 'Accept': '*/*' }, // 请求包头
    files: [imageFile, videoFile], // 待上传的文件列表
    data: [{ name: 'date', value: this.date}, { name: 'address', value: this.address},
      { name: 'label', value: this.label}, { name: 'desc', value: this.desc}]
  }
  let uploadTask: request.UploadTask; // 上传任务
  // 请求上传本地文件
  request.uploadFile(this.context, config).then(data => {
    uploadTask = data;
    // 订阅上传完成事件
    uploadTask.on('complete', () => {
      callback(0, '') // 回调通知上传成功
    })
  }).catch((err: BusinessError) => {
    callback(-1, JSON.stringify(err)) // 回调通知上传失败
  })
}

至此，本系列的“仿抖音快手”App开发技术分享全部完结啦，各位小伙伴们，你们有没有得到什么收获呢？欢迎留言跟帖。