HarmonyOS 需要选择多文件然后上传？

Question

像发朋友圈一样，选择多文件（比如图片）后，9宫图显示并上传选中文件，显示上传进度

Answer 1

九宫格图片demo，参考代码如下：

Grid() {
  ForEach(this.mainViewModel.getFinancialGridData(), (item: ItemData) => {
    GridItem() {
      Column() {
        Image(item.img)
          .width(110)
          .margin({ top: 4 }).onClick(() => {
          router.pushUrl({ url: 'pages/Index1', params: {
            data1: item.index
          } });
        })
      }
    }
  })
}
.backgroundColor(Color.White)
.margin({ top: 15 })
.width('95%')
.height('50%')
.borderRadius(12)
.columnsTemplate('1fr 1fr 1fr')
.rowsTemplate('1fr 1fr 1fr')//3*3矩阵

Column({ space: 5 }) {
  Swiper(this.swiperController) {
    ForEach(this.mainViewModel.getFinancialGridData(), (item: ItemData) => {
      Image(item.img)
        .width('90%')
        .height('90%')
        .margin({ top: 4}).onClick(() => {
        router.pushUrl({ url: 'pages/Index' });
      })
    })
  }
  .cachedCount(2)
  .index(this.params['data1'])
  .autoPlay(false)
  .interval(4000)
  .indicator(true)
  .loop(true)
  .duration(100)
  .itemSpace(0)
  .curve(Curve.Linear)
  .scale({ x: this.scaleValue, y: this.scaleValue, z: 1 })
  .translate({ x: this.offsetX, y: this.offsetY, z: 0 })


  .gesture(
    GestureGroup(GestureMode.Parallel,
      PinchGesture({fingers:2})
        .onActionStart((event?: GestureEvent) => {
        })
        .onActionUpdate((event?: GestureEvent) => {
          if (event) {
            this.scaleValue = this.pinchValue * event.scale
            this.pinchX = event.pinchCenterX
            this.pinchY = event.pinchCenterY
          }
        })
        .onActionEnd(() => {
          this.pinchValue = this.scaleValue
        }),
      PanGesture()
        .onActionUpdate((event?: GestureEvent) => {
          if (event) {
            this.offsetX = this.positionX + event.offsetX
            this.offsetY = this.positionY + event.offsetY
          }
        })
        .onActionEnd(() => {
          this.positionX = this.offsetX
          this.positionY = this.offsetY
        })
    )
  )

}.width('100%')
.margin({ top: 5 })

通过PhotoViewPicker获取到的图片，通过将其复制在应用沙箱路径下，然后再用沙箱路径下的文件进行传输。

下面是部分demo示例：

import { BusinessError } from '@ohos.base';
import { rcp } from '@kit.RemoteCommunicationKit';
import { picker } from '@kit.CoreFileKit';
import fs from '@ohos.file.fs';
import { http } from '@kit.NetworkKit';
let uploadUrl: string = 'http://192.168.62.4:8080/upload';

function example01(): string {
  let uri = '';
  let photoViewPicker = new picker.PhotoViewPicker();
  let photoSelectOption = new picker.PhotoSelectOptions();
  photoSelectOption.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
  photoViewPicker.select(photoSelectOption).then((photoSelectResult) => {
    console.log("fyh photoSelectResult:" + photoSelectResult);
    uri = photoSelectResult.photoUris[0];
    console.log("fyh uri:" + uri);
    try {
      let resultPhoto = fs.openSync(uri,fs.OpenMode.READ_ONLY);
      let resultName = resultPhoto.name;
      let fileTemp = fs.openSync(getContext().filesDir+resultPhoto.name,fs.OpenMode.READ_WRITE|fs.OpenMode.CREATE);
      let imageUri = fileTemp.path;
      fs.copyFileSync(resultPhoto.fd,fileTemp.fd);
      fs.closeSync(resultPhoto);
      fs.closeSync(fileTemp);
      const httpRequest = http.createHttp();
      httpRequest.request(uploadUrl,{
        method:http.RequestMethod.POST,
        header:{
          'Content-Type': 'multipart/form-data',
          'Connection':'keep-alive'
        },
        expectDataType:http.HttpDataType.ARRAY_BUFFER,
        multiFormDataList: [
          {
            name:'file',
            contentType: 'image/jpg',
            filePath: imageUri,
            remoteFileName:'file.jpg'
          },
        ],
      },(err,data) => {
        console.log('tag:上传结束')
        httpRequest.destroy();
      }
      )
    } catch (err) {
      console.error(`tag:Failed to request the upload. err: ${JSON.stringify(err)}`);
    }

  }).catch((err:BusinessError) => {
    console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
  })
  return uri;
}
function testRcpMultiPartUpload() {
  example01();
}
function clickget() {
  const session = rcp.createSession();
  session.get("http://192.168.62.4:8080/getText").then((response) => {
    console.log("tag"+JSON.stringify(response));
  }).catch((err: BusinessError) => {
    console.error("err:" + JSON.stringify(err));
  });
}

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            testRcpMultiPartUpload();
          })
        Text('getText')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            clickget();
          })

      }
      .width('100%')
    }
    .height('100%')
  }
}

以下示例代码将应用缓存文件路径下的文件上传至网络服务器的方式:

// 方式一:request.uploadFile
  // pages/xxx.ets
  import { common } from '@kit.AbilityKit';
import fs from '@ohos.file.fs';
import { BusinessError, request } from '@kit.BasicServicesKit';

// 获取应用文件路径
let context = getContext(this) as common.UIAbilityContext;
let cacheDir = context.cacheDir;

// 新建一个本地应用文件
let file = fs.openSync(cacheDir + '/test.txt', fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
fs.writeSync(file.fd, 'upload file test');
fs.closeSync(file);

// 上传任务配置项
let header = new Map<Object, string>();
header.set('key1', 'value1');
header.set('key2', 'value2');
let files: Array<request.File> = [
//uri前缀internal://cache 对应cacheDir目录
  { filename: 'test.txt', name: 'test', uri: 'internal://cache/test.txt', type: 'txt' }
]
let data: Array<request.RequestData> = [{ name: 'name', value: 'value' }];
let uploadConfig: request.UploadConfig = {
  url: 'https://xxx',
  header: header,
  method: 'POST',
  files: files,
  data: data
}

// 将本地应用文件上传至网络服务器
try {
  request.uploadFile(context, uploadConfig)
    .then((uploadTask: request.UploadTask) => {
      uploadTask.on('complete', (taskStates: Array<request.TaskState>) => {
        for (let i = 0; i < taskStates.length; i++) {
          console.info(`upload complete taskState: ${JSON.stringify(taskStates[i])}`);
        }
      });
    })
    .catch((err: BusinessError) => {
      console.error(`Invoke uploadFile failed, code is ${err.code}, message is ${err.message}`);
    })
} catch (error) {
  let err: BusinessError = error as BusinessError;
  console.error(`Invoke uploadFile failed, code is ${err.code}, message is ${err.message}`);
}

参考链接：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/app-file-upload-download-V5\#上传应用文件