fix: 附件上传优化

spring

2025-09-24 2767d5e2f41ccf766bf84c58f527b1538426fec7

fix: 附件上传优化

 src/pages/production/twist/attachment/index.vue

@@ -32,8 +32,8 @@
              <text class="upload-time">{{ formatTime(item.createTime) }}</text>
            </view>
          </view>
          <view class="attachment-actions">
            <wd-icon name="delete" color="#ff4757" @click.stop="deleteAttachment(item.id)" />
          <view class="attachment-actions" @click.stop>
            <wd-icon name="delete" color="#ff4757" @click="deleteAttachment(item.id)" />
          </view>
        </view>
      </wd-card>
@@ -72,7 +72,8 @@
      // 直接调用通用查看接口查询附件列表
      // 使用示例中的附件ID数组 [850,851]

      const attachmentIds: number[] = detailData.value.attachmentId !== null? detailData.value.attachmentId.split(",") : []; // 使用HTTP文件中的示例数据
      const attachmentIds: number[] =
        detailData.value.attachmentId !== null ? detailData.value.attachmentId.split(",") : []; // 使用HTTP文件中的示例数据
      if (attachmentIds.length === 0) {
        return;
      }
@@ -90,53 +91,134 @@

// 新增附件
const addAttachment = () => {
  uni.chooseFile({
    count: 9, // 最多选择9个文件
    type: "all", // 所有类型文件
    success: async (res) => {
      try {
        toast.show("正在上传...");

        // 上传文件
        const filePaths = Array.isArray(res.tempFilePaths)
          ? res.tempFilePaths
          : [res.tempFilePaths];
        const uploadResults: any = await AttachmentAPI.uploadAttachmentFiles(filePaths);
        const result = uploadResults.map((it) => {
          return it.data;
        });
        console.log("result", result);
        // 更新附件列表
        const flattenedResult = result.flat();
        attachmentList.value.push(...flattenedResult);
        console.log(attachmentList.value);
        // 提取附件ID
        const attachmentId = attachmentList.value.map((item: any) => item.id).join(",");

        // 关联到报工
        if (attachmentId) {
          await AttachmentAPI.addOutputAttachments({
            id: parseInt(detailData.value.id),
            attachmentId: attachmentId,
          });
          detailData.value.attachmentId = attachmentId;
        }

        toast.show("上传成功");
        // 重新获取附件列表
        // await getAttachmentList();
      } catch (error) {
        console.error("上传失败:", error);
        toast.show("上传失败");
  // 显示选择文件类型的弹窗
  uni.showActionSheet({
    itemList: ["选择图片", "选择视频", "拍照", "录像"],
    success: (res) => {
      switch (res.tapIndex) {
        case 0: // 选择图片
          chooseImages();
          break;
        case 1: // 选择视频
          chooseVideos();
          break;
        case 2: // 拍照
          takePhoto();
          break;
        case 3: // 录像
          recordVideo();
          break;
      }
    },
    fail: (error) => {
      console.error("选择文件失败:", error);
      toast.show("选择文件失败");
      console.error("选择文件类型失败:", error);
      toast.show("选择文件类型失败");
    },
  });
};

// 选择图片
const chooseImages = () => {
  uni.chooseImage({
    count: 9,
    sizeType: ["original", "compressed"],
    sourceType: ["album"],
    success: async (res) => {
      const filePaths = Array.isArray(res.tempFilePaths) ? res.tempFilePaths : [res.tempFilePaths];
      await handleFileUpload(filePaths);
    },
    fail: (error) => {
      console.error("选择图片失败:", error);
      toast.show("选择图片失败");
    },
  });
};

// 选择视频
const chooseVideos = () => {
  uni.chooseVideo({
    sourceType: ["album"],
    maxDuration: 60,
    camera: "back",
    success: async (res) => {
      await handleFileUpload([res.tempFilePath]);
    },
    fail: (error) => {
      console.error("选择视频失败:", error);
      toast.show("选择视频失败");
    },
  });
};

// 拍照
const takePhoto = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ["original", "compressed"],
    sourceType: ["camera"],
    success: async (res) => {
      const filePaths = Array.isArray(res.tempFilePaths) ? res.tempFilePaths : [res.tempFilePaths];
      await handleFileUpload(filePaths);
    },
    fail: (error) => {
      console.error("拍照失败:", error);
      toast.show("拍照失败");
    },
  });
};

// 录像
const recordVideo = () => {
  uni.chooseVideo({
    sourceType: ["camera"],
    maxDuration: 60,
    camera: "back",
    success: async (res) => {
      await handleFileUpload([res.tempFilePath]);
    },
    fail: (error) => {
      console.error("录像失败:", error);
      toast.show("录像失败");
    },
  });
};

// 处理文件上传
const handleFileUpload = async (filePaths: string[]) => {
  try {
    toast.show("正在上传...");

    // 上传文件
    const uploadResults: any = await AttachmentAPI.uploadAttachmentFiles(filePaths);
    const result = uploadResults.map((it: any) => {
      return it.data;
    });
    console.log("result", result);

    // 更新附件列表
    const flattenedResult = result.flat();
    attachmentList.value.push(...flattenedResult);
    console.log(attachmentList.value);

    // 提取附件ID
    const attachmentId = attachmentList.value.map((item: any) => item.id).join(",");

    // 关联到报工
    if (attachmentId) {
      await AttachmentAPI.addOutputAttachments({
        id: parseInt(detailData.value.id),
        attachmentId: attachmentId,
      });
      detailData.value.attachmentId = attachmentId;
    }

    toast.show("上传成功");
  } catch (error) {
    console.error("上传失败:", error);
    toast.show("上传失败");
  }
};

// 删除附件
const deleteAttachment = async (aid: number) => {
  try {

 src/pages/production/wire/attachment/index.vue

@@ -32,8 +32,8 @@
              <text class="upload-time">{{ formatTime(item.createTime) }}</text>
            </view>
          </view>
          <view class="attachment-actions">
            <wd-icon name="delete" color="#ff4757" @click.stop="deleteAttachment(item.id)" />
          <view class="attachment-actions" @click.stop>
            <wd-icon name="delete" color="#ff4757" @click="deleteAttachment(item.id)" />
          </view>
        </view>
      </wd-card>
@@ -72,7 +72,8 @@
      // 直接调用通用查看接口查询附件列表
      // 使用示例中的附件ID数组 [850,851]

      const attachmentIds: number[] = detailData.value.attachmentId !== null? detailData.value.attachmentId.split(",") : []; // 使用HTTP文件中的示例数据
      const attachmentIds: number[] =
        detailData.value.attachmentId !== null ? detailData.value.attachmentId.split(",") : []; // 使用HTTP文件中的示例数据
      if (attachmentIds.length === 0) {
        return;
      }
@@ -90,53 +91,134 @@

// 新增附件
const addAttachment = () => {
  uni.chooseFile({
    count: 9, // 最多选择9个文件
    type: "all", // 所有类型文件
    success: async (res) => {
      try {
        toast.show("正在上传...");

        // 上传文件
        const filePaths = Array.isArray(res.tempFilePaths)
          ? res.tempFilePaths
          : [res.tempFilePaths];
        const uploadResults: any = await AttachmentAPI.uploadAttachmentFiles(filePaths);
        const result = uploadResults.map((it) => {
          return it.data;
        });
        console.log("result", result);
        // 更新附件列表
        const flattenedResult = result.flat();
        attachmentList.value.push(...flattenedResult);
        console.log(attachmentList.value);
        // 提取附件ID
        const attachmentId = attachmentList.value.map((item: any) => item.id).join(",");

        // 关联到报工
        if (attachmentId) {
          await AttachmentAPI.addOutputAttachments({
            id: parseInt(detailData.value.id),
            attachmentId: attachmentId,
          });
          detailData.value.attachmentId = attachmentId;
        }

        toast.show("上传成功");
        // 重新获取附件列表
        // await getAttachmentList();
      } catch (error) {
        console.error("上传失败:", error);
        toast.show("上传失败");
  // 显示选择文件类型的弹窗
  uni.showActionSheet({
    itemList: ["选择图片", "选择视频", "拍照", "录像"],
    success: (res) => {
      switch (res.tapIndex) {
        case 0: // 选择图片
          chooseImages();
          break;
        case 1: // 选择视频
          chooseVideos();
          break;
        case 2: // 拍照
          takePhoto();
          break;
        case 3: // 录像
          recordVideo();
          break;
      }
    },
    fail: (error) => {
      console.error("选择文件失败:", error);
      toast.show("选择文件失败");
      console.error("选择文件类型失败:", error);
      toast.show("选择文件类型失败");
    },
  });
};

// 选择图片
const chooseImages = () => {
  uni.chooseImage({
    count: 9,
    sizeType: ["original", "compressed"],
    sourceType: ["album"],
    success: async (res) => {
      const filePaths = Array.isArray(res.tempFilePaths) ? res.tempFilePaths : [res.tempFilePaths];
      await handleFileUpload(filePaths);
    },
    fail: (error) => {
      console.error("选择图片失败:", error);
      toast.show("选择图片失败");
    },
  });
};

// 选择视频
const chooseVideos = () => {
  uni.chooseVideo({
    sourceType: ["album"],
    maxDuration: 60,
    camera: "back",
    success: async (res) => {
      await handleFileUpload([res.tempFilePath]);
    },
    fail: (error) => {
      console.error("选择视频失败:", error);
      toast.show("选择视频失败");
    },
  });
};

// 拍照
const takePhoto = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ["original", "compressed"],
    sourceType: ["camera"],
    success: async (res) => {
      const filePaths = Array.isArray(res.tempFilePaths) ? res.tempFilePaths : [res.tempFilePaths];
      await handleFileUpload(filePaths);
    },
    fail: (error) => {
      console.error("拍照失败:", error);
      toast.show("拍照失败");
    },
  });
};

// 录像
const recordVideo = () => {
  uni.chooseVideo({
    sourceType: ["camera"],
    maxDuration: 60,
    camera: "back",
    success: async (res) => {
      await handleFileUpload([res.tempFilePath]);
    },
    fail: (error) => {
      console.error("录像失败:", error);
      toast.show("录像失败");
    },
  });
};

// 处理文件上传
const handleFileUpload = async (filePaths: string[]) => {
  try {
    toast.show("正在上传...");

    // 上传文件
    const uploadResults: any = await AttachmentAPI.uploadAttachmentFiles(filePaths);
    const result = uploadResults.map((it: any) => {
      return it.data;
    });
    console.log("result", result);

    // 更新附件列表
    const flattenedResult = result.flat();
    attachmentList.value.push(...flattenedResult);
    console.log(attachmentList.value);

    // 提取附件ID
    const attachmentId = attachmentList.value.map((item: any) => item.id).join(",");

    // 关联到报工
    if (attachmentId) {
      await AttachmentAPI.addOutputAttachments({
        id: parseInt(detailData.value.id),
        attachmentId: attachmentId,
      });
      detailData.value.attachmentId = attachmentId;
    }

    toast.show("上传成功");
  } catch (error) {
    console.error("上传失败:", error);
    toast.show("上传失败");
  }
};

// 删除附件
const deleteAttachment = async (aid: number) => {
  try {