HarmonyOS 鸿蒙Next中各位大神，帮我看看为什么这段代码预览的总是同一份内容？感谢！感谢！

HarmonyOS 鸿蒙Next中各位大神，帮我看看为什么这段代码预览的总是同一份内容？感谢！感谢！

import { AxiosError, AxiosProgressEvent, AxiosResponse, FormData } from "@ohos/axios";
import http, { initializeCSRF } from "../common/HttpUtil";
import { promptAction } from "@kit.ArkUI";
import { picker } from '@kit.CoreFileKit';
import { fileIo as fs } from '@kit.CoreFileKit'
import { common, Want } from '@kit.AbilityKit'
import { fileUri } from '@kit.CoreFileKit'
import { BusinessError } from '@kit.BasicServicesKit'
import { filePreview } from "@kit.PreviewKit";


// 在组件外部定义接口
interface DocumentInfo {
  uri: string;
  name: string;
  mimeType: string;
}

@Builder
export function AddFiles() {
  addfiles()
}

const MIME_MAP: Record<string, string> = {
  'pdf': 'application/pdf',
  'doc': 'application/msword',
  'docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
}

@Component
struct addfiles {
  @Consume pathStack: NavPathStack
  @State space: number = 8;
  @State arrowPosition: ArrowPosition = ArrowPosition.END;
  @State standard_no: string = ''
  @State standard_name: string = ''
  @State category: string = '请选择文件类型'
  @State category_index: number = 0
  @State professional: string = '请选择专业'
  @State profess_index: number = 0
  @State item: string = '请选择检测项目'
  @State item_index: number = 0
  @State fileUri: string = ''
  @State fullFileName: string = ''
  @State mimeType: string = ''
  @State fileUrl: string = '' //上传成功后服务器返回的URL
  @State fileName: string = '' //保存文件名，用于预览时获取MIME
  @State isUploading: boolean = false
  @State isPreviewing: boolean = false  // ✅ 添加预览状态
  // 存储选中的文档信息
  @State selectedDocument: DocumentInfo | null = null


  async aboutToAppear() {
    await initializeCSRF()
  }

  //根据文件名获取MIME类型
  getMimeType(fileName: string): string {
    //提取文件扩展名例如：.pdf
    const ext = fileName.split('.').pop()?.toLowerCase()
    //从映射表中查找对应的MIME类型
    if (ext && MIME_MAP[ext]) {
      return MIME_MAP[ext]
    }
    //默认返回通用二进制流类型
    return 'application/octet-stream'
  }

  // 解码文件名（处理URL编码）
  decodeFileName(encodedName: string): string {
    try {
      return decodeURIComponent(encodedName);
    } catch (e) {
      return encodedName;
    }
  }

  // 从URI中提取文件名（处理特殊格式）
  extractFileNameFromUri(uri: string): string {
    // URI格式：file://docs/storage/Users/currentUser/Documents/文件名.pdf
    // 提取最后一个斜杠后的部分
    let fileName = uri.split('/').pop() || '未知文件';
    // 解码URL编码的字符（如 %20 转为空格）
    return this.decodeFileName(fileName);
  }

  async selectAndUpload() {
    try {
      //获取上下文
      let context = getContext(this) as common.Context
      //创建文档选择器
      let documentPicker = new picker.DocumentViewPicker(context)
      //配置选择选项（限制文件类型）
      const options = new picker.DocumentSelectOptions()
      options.maxSelectNumber = 1 //一次只能选择1个文件
      //限制显示的文件类型
      options.fileSuffixFilters = ['.pdf', '.doc', '.docx']
      const uris = await documentPicker.select(options)
      if (uris && uris.length > 0) {
        this.fileUri = uris[0]
        console.info('原始URI:', this.fileUri)
        // 提取并解码文件名
        this.fullFileName = this.extractFileNameFromUri(this.fileUri);
        this.mimeType = this.getMimeType(this.fullFileName);
        // 7. 保存选中的文档信息
        //先给fileName赋值，这样就能实时看到文件名
        this.fileName = this.fullFileName

        this.selectedDocument = null
        this.selectedDocument = {
          uri: this.fileUri,
          name: this.fileName,
          mimeType: this.mimeType,
        };
        // 更新界面显示
        console.info(`选择文件成功：${this.fullFileName}`);
        console.info(`MIME类型：${this.mimeType}`);

        //开始上传
        // await this.uploadFile(fileUri,fullFileName,mimeType)
      } else {
        console.info('用户取消了选择')
      }
    } catch (err) {
      let error = err as BusinessError
      console.error(`选择文件失败：${error.message}`)
      promptAction.showToast({ message: '选择文件失败，请重试' })
    }
  }

  // 读取文件内容的辅助函数
  async readFileContent(uri: string): Promise<ArrayBuffer> {
    try {
      // 方法1：尝试直接使用 fs.openSync
      let file = fs.openSync(uri, fs.OpenMode.READ_ONLY);
      let stat = fs.statSync(file.fd);
      let buffer = new ArrayBuffer(stat.size);
      fs.readSync(file.fd, buffer);
      fs.closeSync(file);
      return buffer;
    } catch (err) {
      console.error('直接读取失败，尝试其他方法：', err);
      // 方法2：对于 file://docs/ 格式的URI，需要先复制到应用沙箱
      // 但这里已经是URI格式，需要特殊处理
      throw new Error('无法读取文件内容，请确保文件存在且可访问');
    }
  }

  async uploadFile(uri: string, fileName: string, mimeType: string) {
    this.isUploading = true;
    let sandboxPath = '';

    try {
      // 1. 获取应用上下文
      let uiContext = getContext(this) as common.UIAbilityContext;

      // 2. 处理文件名（移除可能的路径分隔符）
      let safeFileName = fileName.replace(/[\\/]/g, '_');
      sandboxPath = `${uiContext.cacheDir}/${safeFileName}`;

      console.info('源URI：', uri);
      console.info('目标沙箱路径：', sandboxPath);

      // 3. 复制文件到应用沙箱（关键修复点）
      try {
        // 对于 file://docs/ 格式的URI，需要先通过 fs.open 获取文件描述符
        // 然后复制内容
        let srcFile = fs.openSync(uri, fs.OpenMode.READ_ONLY);
        let destFile = fs.openSync(sandboxPath, fs.OpenMode.CREATE | fs.OpenMode.WRITE_ONLY);

        // 分批复制文件内容
        const bufferSize = 8192; // 8KB 缓冲区
        let buffer = new ArrayBuffer(bufferSize);
        let totalBytes = 0;

        while (true) {
          let bytesRead = fs.readSync(srcFile.fd, buffer);
          if (bytesRead <= 0) {
            break;
          }

          // 只写入实际读取的字节数
          let writeBuffer = buffer.slice(0, bytesRead);
          fs.writeSync(destFile.fd, writeBuffer);
          totalBytes += bytesRead;
        }

        fs.closeSync(srcFile);
        fs.closeSync(destFile);

        console.info(`文件复制成功，大小：${totalBytes} 字节`);
      } catch (copyErr) {
        console.error('文件复制失败：', copyErr);

        // 尝试使用 fileUri 模块的 getUriFromPath 方法
        try {
          let fileInfo = await fileUri.getUriFromPath(uri);
          console.info('通过 fileUri 获取文件信息：', fileInfo);

          // 如果获取成功，使用返回的路径
          if (fileInfo && fileInfo) {
            fs.copyFileSync(fileInfo, sandboxPath);
            console.info('使用 fileUri 方式复制成功');
          }
        } catch (uriErr) {
          console.error('fileUri 方式也失败：', uriErr);
          throw new Error('无法读取选择的文件');
        }
      }

      // 4. 读取文件内容为 ArrayBuffer
      let file = fs.openSync(sandboxPath, fs.OpenMode.READ_ONLY);
      let stat = fs.statSync(file.fd);
      let buffer = new ArrayBuffer(stat.size);
      fs.readSync(file.fd, buffer);
      fs.closeSync(file);

      console.info(`文件读取成功，大小：${stat.size} 字节`);

      // 5. 创建 FormData 并添加文件
      let formData = new FormData();
      formData.append('file', buffer, safeFileName);
      formData.append('standard_no', this.standard_no);
      formData.append('standard_name', this.standard_name);
      formData.append('category', this.category);
      formData.append('professional', this.professional);
      formData.append('item', this.item);

      // 6. 发送上传请求
      const response: AxiosResponse = await http.post(
        'addfiles',
        formData,
        {
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          timeout: 60000, // 60秒超时，大文件需要更长时间
          onUploadProgress: (progressEvent: AxiosProgressEvent) => {
            if (progressEvent.total) {
              let percent = Math.ceil((progressEvent.loaded / progressEvent.total) * 100);
              console.info(`上传进度：${percent}%`);
            }
          }
        }
      );

      // 7. 处理响应
      if (response.status === 200) {
        console.info('上传成功，响应数据：', response.data);
        this.fileUrl = response.data.file_url || response.data;
        promptAction.showToast({ message: `${fileName} 上传成功` });

        // 可选：上传成功后返回上一页
        // setTimeout(() => {
        //   this.pathStack.pop();
        // }, 1500);
      } else {
        console.error('上传失败，状态码：', response.status);
        promptAction.showToast({ message: `上传失败：${response.status}` });
      }

    } catch (err) {
      console.error('上传失败：', err);
      let errorMessage = err instanceof Error ? err.message : '未知错误';
      promptAction.showToast({ message: `上传失败：${errorMessage}` });
    } finally {
      this.isUploading = false;

      // 清理临时文件
      if (sandboxPath) {
        try {
          fs.accessSync(sandboxPath);
          fs.unlinkSync(sandboxPath);
          console.info('临时文件已清理');
        } catch (e) {
          console.info('临时文件不存在或清理失败');
        }
      }
    }
  }

  async previewDocument() {
    console.info('========== 预览前 selectedDocument ==========');
    console.info(JSON.stringify(this.selectedDocument));
    if (!this.selectedDocument) {
      promptAction.showToast({ message: '请先选择文件' });
      return;
    }

    if (this.isPreviewing) {
      promptAction.showToast({ message: '正在预览中，请稍后' });
      return;
    }

    this.isPreviewing = true;
    let sandboxPath = '';

    try {
      let context = getContext(this) as common.Context;
      let uiContext = getContext(this) as common.UIAbilityContext;

      let fileName = this.selectedDocument.name;
      let fileUri = this.selectedDocument.uri;
      let mimeType = this.selectedDocument.mimeType;

      console.info(`========== 开始预览文档 ==========`);
      console.info(`文件名：${fileName}`);
      console.info(`文件URI：${fileUri}`);
      console.info(`MIME类型：${mimeType}`);

      // 清理文件名中的特殊字符
      let cleanFileName = fileName
        .replace(/[\\/]/g, '_')
        .replace(/\s/g, '_')
        .replace(/[：:]/g, '_')
        .replace(/[？?]/g, '_')
        .replace(/[（）()]/g, '_');

      let timestamp = Date.now();
      sandboxPath = `${uiContext.cacheDir}/preview_${timestamp}_${cleanFileName}`;
      console.info(`临时文件路径：${sandboxPath}`);

      // 复制文件到沙箱
      let srcFile: fs.File | null = null;
      let destFile: fs.File | null = null;

      try {
        srcFile = fs.openSync(fileUri, fs.OpenMode.READ_ONLY);
        console.info('源文件打开成功，fd:', srcFile.fd);

        destFile = fs.openSync(sandboxPath, fs.OpenMode.CREATE | fs.OpenMode.WRITE_ONLY);

        const bufferSize = 8192;
        let buffer = new ArrayBuffer(bufferSize);
        let totalBytes = 0;

        while (true) {
          let bytesRead = fs.readSync(srcFile.fd, buffer);
          if (bytesRead <= 0) break;
          let writeBuffer = buffer.slice(0, bytesRead);
          fs.writeSync(destFile.fd, writeBuffer);
          totalBytes += bytesRead;
        }

        console.info(`文件复制成功，大小：${totalBytes} 字节`);

      } catch (copyErr) {
        console.error('文件复制失败：', copyErr);
        throw new Error(`文件复制失败：${copyErr.message}`);
      } finally {
        if (srcFile) try { fs.closeSync(srcFile); } catch (e) {}
        if (destFile) try { fs.closeSync(destFile); } catch (e) {}
      }

      // 验证文件
      let stat = fs.statSync(sandboxPath);
      console.info(`复制后文件大小：${stat.size} 字节`);

      if (stat.size === 0) {
        throw new Error('复制后的文件大小为0');
      }

      // ========== 方法1：使用 filePreview ==========
      try {
        let previewInfo: filePreview.PreviewInfo = {
          title: fileName,
          uri: sandboxPath,
          mimeType: mimeType
        };

        console.info('调用 canPreview 检查...');
        let canPreview = await filePreview.canPreview(context, sandboxPath);
        console.info(`canPreview 结果：${canPreview}`);

        if (canPreview) {
          console.info('调用 openPreview...');
          await filePreview.openPreview(context, previewInfo);
          console.info('预览器已成功打开');
          promptAction.showToast({ message: '正在打开预览...' });
          return; // 成功，结束
        } else {
          console.warn('系统不支持预览此文件类型');
          // 继续尝试其他方法
        }
      } catch (previewErr) {
        console.error('filePreview 预览失败：', previewErr);
        // 继续尝试其他方法
      }

      // ========== 方法2：使用系统应用打开 ==========
      try {
        console.info('尝试使用系统应用打开...');
        let fileUriToOpen = `file://${sandboxPath}`;
        let want: Want = {
          action: 'ohos.want.action.viewData',
          uri: fileUriToOpen,
          type: mimeType,
          flags: 0x10000000
        };
        await (getContext(this) as common.UIAbilityContext).startAbility(want);
        console.info('系统应用已启动');
        promptAction.showToast({ message: '正在打开文件...' });
        return;
      } catch (abilityErr) {
        console.error('系统应用打开失败：', abilityErr);
      }

      // ========== 方法3：提示用户手动打开 ==========
      console.error('所有预览方法均失败');
      promptAction.showToast({
        message: `无法预览，请使用文件管理器打开：${fileName}`,
        duration: 3000
      });

    } catch (err) {
      let error = err as BusinessError;
      console.error(`预览流程异常：${error.message}`);
      promptAction.showToast({ message: `预览失败：${error.message}` });
    } finally {
      this.isPreviewing = false;

      // 清理临时文件（延迟10秒）
      if (sandboxPath) {
        setTimeout(() => {
          try {
            if (fs.accessSync(sandboxPath)) {
              fs.unlinkSync(sandboxPath);
              console.info('临时文件已清理');
            }
          } catch (e) {}
        }, 30000);
      }

      console.info(`========== 预览流程结束 ==========`);
    }
  }
  build() {
    NavDestination() {
      Column({ space: 5 }) {
        Row() {
          Text('新增文件').fontSize(20).fontWeight(FontWeight.Bold).offset({ left: 20 })
        }.width('100%').justifyContent(FlexAlign.Start).margin({ bottom: 10 })

        Row({ space: 10 }) {
          Text('文件类型').width(65).textAlign(TextAlign.Center)
          Text('|')
          Select([{ value: '国外标准', icon: $r('app.media.wenjianselected') },
            { value: '国家标准', icon: $r('app.media.wenjianselected') },
            { value: '国家标准', icon: $r('app.media.wenjianselected') },
            { value: '行业标准', icon: $r('app.media.wenjianselected') },
            { value: '审核清单', icon: $r('app.media.wenjianselected') },
            { value: '通用文件', icon: $r('app.media.wenjianselected') },
            { value: '一层次文件', icon: $r('app.media.wenjianselected') },
            { value: '二层次文件', icon: $r('app.media.wenjianselected') },
            { value: '三层次文件', icon: $r('app.media.wenjianselected') },
            { value: '其他文件', icon: $r('app.media.wenjianselected') },
          ])
            .selected(this.category_index)
            .value(this.category)
            .font({ size: 16, weight: 500 })
            .fontColor('#182431')
            .backgroundColor(Color.Transparent)
            .selectedOptionFont({ size: 16, weight: 400 })
            .optionFont({ size: 16, weight: 400 })
            .space(this.space)
            .arrowPosition(this.arrowPosition)
            .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 })
            .optionWidth(200)
            .optionHeight(300)
            .onSelect((category_index: number, category?: string | undefined) => {
              console.info('Select:' + category_index);
              this.category_index = category_index;
              if (category) {
                this.category = category;
                console.log(category)
              }
            })
            .layoutWeight(1)
            .avoidance(AvoidanceMode.COVER_TARGET)
        }.backgroundColor('#f4f5f6').borderRadius(15).padding({ left: 10 })

        Row({ space: 10 }) {
          Text('文件编号').width(65).textAlign(TextAlign.Center)
          Text('|')
          TextInput({ placeholder: '请输入文件编号', text: $$this.standard_no })
            .fontColor('#182431')
            .layoutWeight(1)
            .backgroundColor('#f4f5f6')
        }.backgroundColor('#f4f5f6').borderRadius(15).padding({ left: 10 })

        Row({ space: 10 }) {
          Text('文件名称').width(65).textAlign(TextAlign.Center)
          Text('|')
          TextInput({ placeholder: '请输入文件名称', text: $$this.standard_name })
            .fontColor('#182431')
            .layoutWeight(1)
            .backgroundColor('#f4f5f6')
        }.backgroundColor('#f4f5f6').borderRadius(15).padding({ left: 10 })

        Row({ space: 10 }) {
          Text('专       业').width(65).textAlign(TextAlign.Center)
          Text('|')
          Select([{ value: '通用', icon: $r('app.media.zhuanyezhuanyeke') },
            { value: '化学', icon: $r('app.media.zhuanyezhuanyeke') },
            { value: '力学', icon: $r('app.media.zhuanyezhuanyeke') },
            { value: '金相', icon: $r('app.media.zhuanyezhuanyeke') }])
            .selected(this.profess_index)
            .value(this.professional)
            .font({ size: 16, weight: 500 })
            .fontColor('#182431')
            .backgroundColor(Color.Transparent)
            .selectedOptionFont({ size: 16, weight: 400 })
            .optionFont({ size: 16, weight: 400 })
            .space(this.space)
            .arrowPosition(this.arrowPosition)
            .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 })
            .optionWidth(200)
            .optionHeight(300)
            .onSelect((profess_index: number, professional?: string | undefined) => {
              console.info('Select:' + profess_index)
              this.profess_index = profess_index
              if (professional) {
                this.professional = professional
                console.log(this.professional)
              }
            })
            .layoutWeight(1)
            .avoidance(AvoidanceMode.COVER_TARGET)
        }.backgroundColor('#f4f5f6').padding({ left: 10 }).borderRadius(15)

        Row({ space: 10 }) {
          Text('检测项目').width(65).textAlign(TextAlign.Center)
          Text('|')
          Select([{ value: '通用', icon: $r('app.media.xiangmu') },
            { value: '化学成分', icon: $r('app.media.xiangmu') },
            { value: '室温拉伸', icon: $r('app.media.xiangmu') },
            { value: '硬度', icon: $r('app.media.xiangmu') },
            { value: '渗层', icon: $r('app.media.xiangmu') },
            { value: '金相组织', icon: $r('app.media.xiangmu') },
            { value: '失效分析', icon: $r('app.media.xiangmu') }])
            .selected(this.item_index)
            .value(this.item)
            .font({ size: 16, weight: 500 })
            .fontColor('#182431')
            .backgroundColor(Color.Transparent)
            .selectedOptionFont({ size: 16, weight: 400 })
            .optionFont({ size: 16, weight: 400 })
            .space(this.space)
            .arrowPosition(this.arrowPosition)
            .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 })
            .optionWidth(200)
            .optionHeight(300)
            .onSelect((item_index: number, item?: string | undefined) => {
              console.info('Select:' + item_index)
              this.item_index = item_index
              if (item) {
                this.item = item
                console.log(this.item)
              }
            })
            .layoutWeight(1)
            .avoidance(AvoidanceMode.COVER_TARGET)
        }.backgroundColor('#f4f5f6').padding({ left: 10 }).borderRadius(15)

        Row({ space: 10 }) {
          Text('选择文件').width(65)
          Text('|')
          Row() {
            Image($r('app.media.wenjianjia')).width(30).height(30)
          }.layoutWeight(1).justifyContent(FlexAlign.Center).offset({ left: -10 })
          .onClick(() => {
            this.selectAndUpload()
          })
        }
        .backgroundColor('#f4f5f6')
        .width('100%')
        .height(40)
        .padding({ left: 10 })
        .borderRadius(15)

        if (this.selectedDocument){
          Row({space:10}){
            Text('已选文件').width(65)
            Text('|')
            Text(this.selectedDocument.name).layoutWeight(1).fontColor(Color.Blue)
              .onClick(()=>{
                this.previewDocument()
              })
          }.backgroundColor('#f4f5f6')
          .width('100%')
          .height(40)
          .padding({ left: 10 })
          .borderRadius(15)
        }


        Button('新增文件')
          .width('100%')
          .type(ButtonType.Capsule)
          .borderRadius(10)
          .margin({ top: 20 })
          .enabled(this.standard_no && this.standard_name ? true : false)
          .onClick(() => {
            this.uploadFile(this.fileUri, this.fullFileName, this.mimeType)
          })
      }
      .width('100%').height('100%')
      .padding({ left: 20, right: 20 })
    }.hideTitleBar(true)
  }
}