ArkTS(3.0与3.1)前端和SpringBoot后端文件上传示例(Request.upload)-51CTO.COM

前言

此帖主要讲解通过开发文档示例代码写一个完整Demo，方便初学者理解开发文档内容，大家都知道3.0使用的是FA模式、3.1使用的是Stage模式，所以同样是文件上传，代码写法上有些不一样，开发文档也不一样，比如在3.1下，可以在HarmonyOS Developer > 文档 > 指南 > 开发下找到文件上传下载示例代码，而在3.0下，就找不到相应指南开发了，只能在HarmonyOS Developer > 文档 > API参考 > ArkTS API参考找到@ohos.request (上传下载)文档，为了实现一个完整文件上传Demo，后端是少不了的，这里我使用了我平常工作中用到的SpringBoot开发后端，为了验证文件上传接口是否正常，使用Thymeleaf写一个简单的前端页面来测试接口，先保证后端文件上传接口是正常的，这样其它前端调用就可以排除后端文件上传接口问题，专心调试前端代码，希望小伙伴通过此贴学习到文件上传同时，参考此思路也可以自己完成其它示例代码完成Demo。

效果

ArkTS(3.0与3.1)前端和SpringBoot后端文件上传示例(Request.upload)-开源基础软件社区

知识点

ArkTS(3.0)文件管理(前端)

此版本使用的是FA模式、配置文件名是config.json 由于文件上传需要网络，需要添加权限：ohos.permission.INTERNET，默认支持https，如果要支持http，需要在config.json里增加network标签，属性标识 “cleartextTraffic”: true。所以config.json要添加的内容以下：

{
  "app": {...},
  "deviceConfig": {
    "default": {
      "network": {
        "cleartextTraffic": true
      }
    }
  },
  "module": {
    "reqPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]
  }
}

文件上传页面就一个index.ets文件，里面包含UI和调用后端接口，代码如下：

import request from '@ohos.request';
import featureAbility from '@ohos.ability.featureAbility';
import fileio from '@ohos.fileio';

@Entry
@Component
struct Index {
  @State btnLabel: string = '提交文件'
  private uploadTask: request.UploadTask

  aboutToAppear() {
    // 获取应用文件路径
    var context = featureAbility.getContext();
    context.getCacheDir().then((data) => {
      console.info("xx ======================>getCacheDirPromsie====================>");
      console.info("xx ====>data====>" + JSON.stringify(data));

      // 新建一个本地应用文件
      let fd = fileio.openSync(data + '/test.txt', 0o102, 0o666);
      fileio.writeSync(fd, 'upload file test by army');
      fileio.closeSync(fd);
    });
  }

  aboutToDisappear() {
    this.uploadTask.off("progress")
  }

  uploadFile() {
    // 上传任务配置项
    let uploadConfig = {
      url: 'http://111.114.238.134:8740/file/upload',
      header: { key1: 'Content-Type', key2: 'multipart/form-data' },
      method: 'POST',
      files: [
        { filename: 'test.txt', name: 'test', uri: 'internal://cache/test.txt', type: 'txt' }
      ],
      data: [
        { name: 'fileId', value: 'FP000008' }
      ]
    }

    // 将本地应用文件上传至网络服务器
    try {
      this.btnLabel = '文件上传中...'
      request.upload(uploadConfig)
        .then((data) => {
          this.btnLabel = '文件上传成功'
          this.uploadTask = data
          console.info('xx Success to request the upload. Cause: ' + JSON.stringify(data));
          // uploadTask = data;
          this.uploadTask.on("progress", (uploadedSize, totalSize) => {
            console.info('xx 上传进度值是：' + uploadedSize + ', 总大小：' + totalSize)
          })

        }).catch((err) => {
        this.btnLabel = '文件上传失败'
        console.error('xx Failed to request the upload. Cause: ' + JSON.stringify(err));
      })
    } catch (err) {
      this.btnLabel = '文件上传失败'
      console.error(`xx Invoke uploadFile failed, code is ${err.code}, message is ${err.message}`);
    }

  }

  build() {
    Column({space: 30}) {
      Text('上传文件实例：')
        .width('100%')
        .height(50)
        .fontSize(24)
        .textAlign(TextAlign.Center)
      Button('提交文件')
        .onClick(() => {
          this.uploadFile()
        })
        .width('80%')
        .height(50)
        .fontSize(24)
    }.width('100%').height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

ArkTS(3.1)文件管理(前端)

此版本使用的是Stage模式、配置文件名是module.json5 由于文件上传需要网络，需要添加权限：ohos.permission.INTERNET，在3.1不用配置，就支持http和https，当前上传应用文件功能，仅支持上传应用缓存文件路径（cacheDir）下的文件。所以module.json5要添加的内容以下：

{
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]
  }
}

文件上传页面就一个index.ets文件，里面包含UI和调用后端接口，代码如下：

import common from '@ohos.app.ability.common';
import fs from '@ohos.file.fs';
import request from '@ohos.request';
import hash from '@ohos.file.hash';


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

@Entry
@Component
struct Index {
  @State btnLabel: string = '提交文件'
  private uploadTask: request.UploadTask

  aboutToAppear() {
    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 by API9');
    fs.closeSync(file);
  }

  aboutToDisappear() {
    this.uploadTask.off("complete")
  }

  uploadFile() {

    // 上传任务配置项
    let uploadConfig = {
      url: 'http://111.114.238.134:8740/file/upload',
      header: { key1: 'Content-Type', key2: 'multipart/form-data' },
      method: 'POST',
      files: [
        { filename: 'test.txt', name: 'test', uri: 'internal://cache/test.txt', type: 'txt' }
      ],
      data: [
        { name: 'fileId', value: 'FP000008' }
      ]
    }

    // 将本地应用文件上传至网络服务器
    try {
      this.btnLabel = '文件上传中...'
      request.uploadFile(context, uploadConfig)
        .then((data) => {
          this.btnLabel = '文件上传成功'
          this.uploadTask = data
          this.uploadTask.on('complete', (taskStates) => {
            for (let i = 0; i < taskStates.length; i++) {
              console.info(`xx upload complete taskState: ${JSON.stringify(taskStates[i])}`);
            }
          });
        })
        .catch((err) => {
          this.btnLabel = '文件上传失败'
          console.error(`xx Invoke uploadFile failed, code is ${err.code}, message is ${err.message}`);
        })
    } catch (err) {
      this.btnLabel = '文件上传失败'
      console.error(`xx Invoke uploadFile failed, code is ${err.code}, message is ${err.message}`);
    }
  }
  
  build() {
    Column({space:30}) {
      Text('上传文件实例：')
        .width('100%')
        .height(50)
        .fontSize(24)
        .textAlign(TextAlign.Center)
      Button(this.btnLabel)
        .onClick(() => {
          this.uploadFile()
        })
        .width('80%')
        .height(50)
        .fontSize(24)
    }
    .width('100%').height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

SpringBoot和Thymeleaf(后端)

后端首先列出pom.xml文件，里面包含项目依赖jar配置，比如web、thymeleaf依赖，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.1.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.army</groupId>
    <artifactId>file-manage</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>file-manage</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.6</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

前端调用接口文件Controller代码如下：

@RestController
@RequestMapping("/file")
@Slf4j
public class FileController {
    @Autowired
    FileService fileService;

    @PostMapping("/upload")
    public StandardResponse upload(String fileId, MultipartHttpServletRequest multiPartRequest) {
        log.info("**Upload File Controller!");

        FileCriteria criteria = new FileCriteria();
        criteria.setFileId(fileId);

        try {
            //upload file
            Iterator<String> itr =  multiPartRequest.getFileNames();
            MultipartFile mpf = null;

            while(itr.hasNext()){
                mpf = multiPartRequest.getFile(itr.next());
                break;
            }
            byte[] fileByteArr = null;
            if (null != mpf && !mpf.isEmpty()) {
                String originalFileName = mpf.getOriginalFilename();
                log.info(originalFileName);
                criteria.setFileName("");
                String fileExtension = FilenameUtils.getExtension(originalFileName);
                criteria.setFileExtension(fileExtension);
                fileByteArr = mpf.getBytes();
                criteria.setFileByteArray(fileByteArr);

                criteria.setFileName(originalFileName);
            }
        } catch (IOException e) {
            e.printStackTrace();
            log.error(e.getMessage());
        }

        return fileService.uploadFile(criteria);
    }

}

后端业务逻辑代码，也就是文件上传处理逻辑Service代码如下：
（1）业务接口：

public interface FileService {
    StandardResponse uploadFile(FileCriteria criteria);

    String saveFile(FileCriteria criteria);
}

（2）业务实现类：

@Service
@Slf4j
public class FileServiceImpl implements FileService {
    @Value("${project.root.path}")
    private String rootPath = "rootPath";
    @Value("${project.baseUrl}")
    private String baseUrl;

    @Override
    public StandardResponse uploadFile(FileCriteria criteria) {
        String filePath = this.saveFile(criteria);
        String imgPath = baseUrl + "filePath/" + filePath;

        StandardResponse standardResponse = new StandardResponse();
        standardResponse.setSuccess(true);
        standardResponse.setStatusCode("100");
        standardResponse.setStatusDesc("上传成功");
        standardResponse.setData(imgPath);
        return standardResponse;
    }

    @Override
    public String saveFile(FileCriteria criteria) {
        log.info("上传文件开始!");
        String pictureId = IdUtils.getId("FP");
        String fileName = pictureId + "." + criteria.getFileExtension();
        criteria.setFileName(fileName);


        String filePath = sourceFile(criteria);
        log.info("File Path: " + filePath);
        log.info("上传文件结束!");
        return filePath;
    }

    private String sourceFile(FileCriteria criteria) {
        byte[] attachmentFileByteArray = criteria.getFileByteArray();
        if (null != attachmentFileByteArray) {

            log.info("1.1.创建根目录.");
            String basePath = rootPath + this.genDatePath();
            File basePathFolder = new File(basePath);
            if (!basePathFolder.exists()) basePathFolder.mkdirs();
            log.info("根目录: " + basePath);

            File file = new File(basePath + File.separator + criteria.getFileName());
            log.info("1.2.保存源文件 - 绝对路径: " + file.getAbsolutePath());

            try {
                FileCopyUtils.copy(attachmentFileByteArray, file);
                log.info("1.3.1.保存源文件 - 保存成功 !!!");

                String relativePath = this.genDatePath() + File.separator + criteria.getFileName();

                return relativePath;
            } catch (IOException e) {
                log.info("1.3.2.保存源文件 - 保存失败 !!!");
                file.deleteOnExit();
                return "";
            }
        }
        return "";
    }

    private String genDatePath(){
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
        String yyyyMMdd = sdf.format(new Date());

        return yyyyMMdd;
    }
}

配置文件

server:
  port: 8740

project:
  root:
    path: /var/tomcat/file-manage/filePath/
  baseUrl: http://111.114.238.134:8740/

访问域名或IP加端口访问到Thymeleaf页面，要添加一个Controller跳转

@Controller
public class IndexController {

    @GetMapping("/")
    public String Index() {
        return "index";
    }
}

在templates目录下创建index.htm页面文件，这里的index名要和上面Controller返回“index”名一致，才能跳转过去，index.html代码如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
</head>
<body>
<p>单文件上传</p>
<form method="post" action="/file/upload" enctype="multipart/form-data">
    <input type="text" name="fileId" value="FP00001">
    <p><input type="file" name="file00"></p>
    <input type="submit" value="提交">
</form>

</body>
</html>

ArkTS(3.0与3.1)前端和SpringBoot后端文件上传示例(Request.upload)-开源基础软件社区

上面图片就是Thymeleaf页面，上传文件成功后效果。

总结

通过此贴学习到文件上传3.0与3.1的不同处，同时也学习到了后端开发流程，其实写这个贴子之前，是一个小伙伴问到我关于文件上传问题，由于之前我写的实例里，也没有用到文件上传功能，于是我就用最新API9也就是Stage模式写了一个Demo给他参考，然后他通过参考我的Demo，学会了，可惜他现在开发的项目是用API8的，由于开发模式不一样，他遇到了问题，于是我在用API8写了一个Demo给他参考，最后他的项目也实现了文件上传。

文章相关附件可以点击下面的原文链接前往下载：

https://ost.51cto.com/resource/2729。

https://ost.51cto.com/resource/2730。

https://ost.51cto.com/resource/2731。

想了解更多关于开源的内容，请访问：

51CTO 开源基础软件社区

https://ost.51cto.com