规章制度附件上传下载

zhangwencui

5 天以前 9be5670e35e25c77f1d8d0bdf0e84bb78fb313e6

规章制度附件上传下载

 src/pages/managementMeetings/rulesRegulationsManagement/fileList.vue

@@ -31,7 +31,7 @@
            <u-button size="small"
                      type="info"
                      plain
                      @click="downloadFile(file)">下载</u-button>
                      @click="downloadFile(file)">下载并预览</u-button>
            <u-button size="small"
                      type="error"
                      plain
@@ -48,10 +48,10 @@
        <text class="empty-text">暂无附件</text>
      </view>
    </view>
    <a rel="nofollow"
    <!-- <a rel="nofollow"
       id="downloadLink"
       href="#"
       style="display:none;">下载文本文件</a>
       style="display:none;">下载文本文件</a> -->
    <!-- 上传按钮 -->
    <view class="upload-button"
          @click="chooseFile">
@@ -143,18 +143,19 @@

  // 选择文件
  const chooseFile = () => {
    // uni.chooseImage({
    //   count: 9,
    //   sizeType: ["original", "compressed"],
    //   sourceType: ["album", "camera"],
    //   success: res => {
    //     uploadFiles(res.tempFiles);
    //   },
    //   fail: err => {
    //     console.error("选择图片失败:", err);
    //     showToast("选择文件失败");
    //   },
    // });
    uni.chooseImage({
      count: 9,
      sizeType: ["original", "compressed"],
      sourceType: ["album", "camera"],
      success: res => {
        console.log(res, "选择图片成功");
        uploadFiles(res.tempFiles);
      },
      fail: err => {
        console.error("选择图片失败:", err);
        showToast("选择文件失败");
      },
    });
    // uni.chooseFile({
    //   count: 9,
    //   extension: [
@@ -174,6 +175,7 @@
    //     ".rar",
    //   ],
    //   success: res => {
    //     console.log(res, "选择文件成功");
    //     uploadFiles(res.tempFiles);
    //   },
    //   fail: err => {
@@ -184,13 +186,14 @@

  // 上传文件
  const uploadFiles = tempFiles => {
    console.log(tempFiles, "上传文件1");
    tempFiles.forEach((tempFile, index) => {
      // 显示上传中提示
      uni.showLoading({
        title: "上传中...",
        mask: true,
      });
      console.log(tempFile, "上传文件");
      console.log(tempFile, "上传文件2");
      // 1. 直接使用 uni.uploadFile 上传文件
      uni.uploadFile({
        url: config.baseUrl + "/file/upload",
@@ -201,12 +204,17 @@
        },
        success: uploadRes => {
          uni.hideLoading();
          console.log(uploadRes, "上传文件3");

          try {
            const res = JSON.parse(uploadRes.data);
            console.log(res, "上传文件4");
            if (res.code === 200) {
              // 2. 提取文件信息
              const fileName = tempFile.name;
              const fileType = fileName.split(".").pop();
              const fileName = tempFile.name
                ? tempFile.name
                : tempFile.path.split("/").pop();
              // const fileType = fileName.split(".").pop();
              // 3. 构造保存文件信息的参数
              const saveData = {
                name: fileName,
@@ -250,7 +258,6 @@
      });
    });
  };

  // 下载文件
  const downloadFile = file => {
    var url =
@@ -267,21 +274,60 @@
        header: { Authorization: "Bearer " + getToken() },
      })
      .then(res => {
        console.log(res, "res");
        const isBlob = blobValidate(res.data);
        console.log(isBlob, "isBlob");
        if (isBlob) {
          const blob = new Blob([res.data], { type: "text/plain" });
          const url = URL.createObjectURL(blob);
          const downloadLink = document.getElementById("downloadLink");
          downloadLink.href = url;
          downloadLink.download = file.name;
          downloadLink.click();
          // downloadLink.style.display = "block";
          showToast("下载成功");
        let osType = uni.getStorageSync("deviceInfo").osName;
        let filePath = res.tempFilePath;
        if (osType === "ios") {
          uni.openDocument({
            filePath: filePath,
            showMenu: true,
            success: res => {
              resolve(res);
            },
            fail: err => {
              console.log("uni.openDocument--fail");
              reject(err);
            },
          });
        } else {
          showToast("下载失败");
          uni.saveFile({
            tempFilePath: filePath,
            success: fileRes => {
              uni.showToast({
                icon: "none",
                mask: true,
                title:
                  "文件已保存：Android/data/uni.UNI720216F/apps/__UNI__720216F/" +
                  fileRes.savedFilePath, //保存路径
                duration: 3000,
              });
              setTimeout(() => {
                //打开文档查看
                uni.openDocument({
                  filePath: fileRes.savedFilePath,
                  success: function (res) {
                    resolve(fileRes);
                  },
                });
              }, 3000);
            },
            fail: err => {
              console.log("uni.save--fail");
              reject(err);
            },
          });
        }
        // const isBlob = blobValidate(res.data);
        // if (isBlob) {
        //   const blob = new Blob([res.data], { type: "text/plain" });
        //   const url = URL.createObjectURL(blob);
        //   const downloadLink = document.getElementById("downloadLink");
        //   downloadLink.href = url;
        //   downloadLink.download = file.name;
        //   downloadLink.click();
        //   showToast("下载成功");
        // } else {
        //   showToast("下载失败");
        // }
      })
      .catch(err => {
        console.error("下载失败:", err);
@@ -483,8 +529,8 @@
    position: fixed;
    bottom: 40rpx;
    right: 40rpx;
    width: 80rpx;
    height: 80rpx;
    width: 130rpx;
    height: 130rpx;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;

 src/pages/managementMeetings/rulesRegulationsManagement/index.vue

@@ -115,6 +115,12 @@
                      @click="viewDetail(item,2)">
              编辑
            </u-button>
            <u-button type="primary"
                      size="small"
                      class="action-btn"
                      @click="fileList(item,2)">
              附件
            </u-button>
          </view>
        </view>
      </view>