epmet-resi-rizhao/components/uploadAttachment/index.ts

import {
  wxPreviewImage,
  wxPreviewMedia,
  wxOpenDocument,
  wxChooseMessageFile,
  wxChooseMedia,
  wxChooseImage,
  wxUploadFile,
  wxShowActionSheet,
} from "@utils/promise-wx-api";

const app = getApp();
const sys = wx.getSystemInfoSync();
console.log(sys);

Component({
  behaviors: [],
  properties: {
    displayed:{
      type: Boolean,
      value: true
    },
    list: {
      type: Array,
      value: [],
    },
    showAdd: {
      type: Boolean,
      value: true,
    },
    formatLimit: {
      type: Array,
      value: ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "pdf"],
    },
    max: {
      type: Number,
      value:10,
    },
    showList: {
      type: Array,
      value:[],
    },
    selType: {
      type: String,
      value:"all",
    },
    defautAddFlag: {//是否默认添加，默认添加，自动根据数据的格式添加，非默认添加，程序根据类型赋值
      type: Boolean,
      value:false,
    },
  },

  data: {
    // max: 10,

    // formatLimit: ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "pdf"],

    attachmentList: [
    ],
  },

  lifetimes: {
    attached() {
      this.init();

      const {showList,selType,defautAddFlag} = this.data

      if(showList.length>0){
        if(!defautAddFlag){
          if(selType==="image"){
            showList.forEach(element => {
              element.type="image"
              element.tempFilePath=element.url
              element.name="图片"
            });
          }
          

        }     
        this.addList(showList)
        
      }
     
      
    },
  },

  methods: {
    async init() {
      const { list } = this.data;
      this.syncList(list);
    },

    syncList(list) {},

    // 选择图片
    async handleTapAdd() {
     
      const {selType} = this.data
      if(selType==='all'){
        if (sys.platform === "windows") {
          const { msg, data } = await wxShowActionSheet({
            itemList: ["选择图片", "选择视频", "从聊天记录"],
          });
          if (msg == "success") {
            const { tapIndex } = data;
            if (tapIndex === 0) {
              this.selectImage();
            } else if (tapIndex === 1) {
              this.selectMedia();
            } else if (tapIndex === 2) {
              this.selectFile();
            }
          }
        } else {
          const { msg, data } = await wxShowActionSheet({
            itemList: ["从相册选择或拍摄", "从聊天记录"],
          });
          if (msg == "success") {
            const { tapIndex } = data;
            if (tapIndex === 0) {
              this.selectMedia();
            } else if (tapIndex === 1) {
              this.selectFile();
            }
          }
        }
      }else if(selType==='image'){
        this.selectImage();
      }
    },

    async selectMedia() {
      const { max, attachmentList } = this.data;
      let count = max - attachmentList.length;
      count = count > 9 ? 9 : count;
      // pc会出问题。。。
      const { msg, data } = await wxChooseMedia({
        count,
        sizeType: ["compressed"],
        mediaType: ["image", "video"],
        // maxDuration: 30,
      });
      console.log("选择media", msg, data);
      if (msg === "success") {
        const { tempFiles, type } = data;
        let newList = tempFiles.map((item) => {
          let format = this.getFormatByPath(item.tempFilePath);
          let name = type === "video" ? "视频" : "图片";
          name = name + "." + format;
          return {
            tempFilePath: item.tempFilePath,
            size: item.size,
            duration: item.duration,
            thumbTempFilePath: item.thumbTempFilePath,
            type,
            format,
            name,
            url: "",
            error: "",
          };
        });
        this.addList(newList);
      }
    },

    async selectImage() {
     
      const { max, attachmentList } = this.data;
      if(attachmentList.length===max){
        wx.showToast({
          title: "不能超过"+max+"张图片",
          icon: "none",
          duration: 1500
        });
        return
      }
      let count = max - attachmentList.length;
      count = count > 9 ? 9 : count;
      // pc会出问题。。。
      const res2 = await wxChooseImage({
        count,
        sizeType: ["compressed"],
      });
      console.log("选择image", res2);
      if (res2.msg === "success") {
        const { tempFiles } = res2.data;
        let newList = tempFiles.map((item) => {
          let format = this.getFormatByPath(item.path);
          let name = "图片";
          name = name + "." + format;
          return {
            tempFilePath: item.path,
            size: item.size,
            type: "image",
            format,
            name,
            url: "",
            error: "",
          };
        });
        this.addList(newList);
      }
    },

    async selectFile() {
      const { max, attachmentList,formatLimit } = this.data;
      
      if(attachmentList.length===max){
        wx.showToast({
          title: "不能超过"+max+"个附件",
          icon: "none",
          duration: 1500
        });
        return
      }
      const { msg, data } = await wxChooseMessageFile({
        count: max - attachmentList.length,
        type:'file',
        // sizeType: ["compressed"],
        extension:formatLimit,
      });
      if (msg === "success") {
        console.log(data)
        const { tempFiles } = data;
        let newList = tempFiles.map((item) => {
          let format = this.getFormatByPath(item.path);
          let name = item.name;
          return {
            tempFilePath: item.path,
            size: item.size,
            type: item.type === "file" ? "doc" : item.type,
            format,
            name,
            url: "",
            error: "",
          };
        });
        this.addList(newList);
      } else if (msg === "chooseMessageFile:fail:not supported") {
        return wx.showToast({
          title: "当前环境不支持此操作",
          icon: "none",
          duration: 2000,
        });
      }
    },

    // 去重，但是真的能去掉吗？
    addList(list) {
      let { attachmentList, formatLimit } = this.data;
      let pathList = attachmentList.map((item) => item.tempFilePath);
      let errorList = [];
      let newList = list.filter((item) => {
        if (item.type === "doc") {
          if (formatLimit.indexOf(item.format) === -1) {
            errorList.push("仅限pdf文件");
            return false;
          } else if (item.size > 1024 * 1024 * 5) {
            errorList.push("文档大小不能超过5M");
            return false;
          }
        } else if (item.type === "image" || item.type === "video") {
          if (item.size > 1024 * 1024 * 10) {
            errorList.push("图片或视频大小不能超过10M");
            return false;
          }
        }
        return pathList.indexOf(item.tempFilePath) === -1;
      });
      if (errorList.length > 0) {
        wx.showToast({
          title: errorList[0],
          icon: "none",
          duration: 3000,
        });
      }
      this.setData({
        attachmentList: [...attachmentList, ...newList],
      });
      this.triggerEvent("addFileList", this.data.attachmentList);
    },

    getFormatByPath(path) {
      let arr = path.split(".");
      if (arr.length > 0) {
        return arr.pop();
      } else {
        return "";
      }
    },

    // 点击附件
    async handleTapItem(e) {
      const {selType} = this.data
      const {
        currentTarget: {
          dataset: { index },
        },
      } = e;
      console.log(index);

    
        const { msg, data } = await wxShowActionSheet({
          itemList: ["查看", "删除", "重命名"],
        });
        if (msg == "success") {
          const { tapIndex } = data;
          if (tapIndex === 0) {
            // 查看
            this.previewItem(index);
          } else if (tapIndex === 1) {
            // 删除
            this.delItem(index);
          } else if (tapIndex === 2) {
            // 重命名
            this.rename(index);
          }
        }
     
    },

    // 预览
    async previewItem(index) {
      const { attachmentList } = this.data;
      const item = attachmentList[index];
      if (item.type === "doc") {
        wxOpenDocument({
          filePath: item.tempFilePath,
          // showMenu: true,
        });
      } else if (item.type === "video") {
        const res = await wxPreviewMedia({
          sources: [
            {
              url: item.tempFilePath,
              type: item.type,
            },
          ],
        });
        if (res.msg === "previewMedia:fail:not supported") {
          return wx.showToast({
            title: "当前环境不支持查看视频",
            icon: "none",
            duration: 2000,
          });
        }
      } else if (item.type === "image") {
        wxPreviewImage({
          urls: [item.tempFilePath],
        });
      }
    },

    delItem(index) {
      let { attachmentList } = this.data;
      attachmentList.splice(index, 1);
      this.setData({
        attachmentList,
      });
      this.triggerEvent("deFileList", this.data.attachmentList);
    },

    async rename(index) {
      const { attachmentList } = this.data;
      const item = attachmentList[index];
      let { name } = item;
      let nameArr = name.split(".");
      let format = nameArr.pop();
      let pureName = nameArr.join(".");
      const $inputName = this.selectComponent("#inputName");
      this.triggerEvent("hideNativeComponents");
      const { msg, data } = await $inputName.show({
        title: "文件重命名",
        value: pureName,
      });
      this.triggerEvent("showNativeComponents");
      if (msg === "success") {
        const { value } = data;
        if (value) {
          item.name = value + "." + format;
          this.setData({ attachmentList });
          wx.showToast({
            title: "重命名成功",
            duration: 1500,
          });
        } else {
          wx.showToast({
            title: "文件名不能为空",
            icon: "none",
            duration: 2000,
          });
        }
      }
    },

    // 上传图片
    async upload(uploadUrl,formDataParams) {
      if(!uploadUrl){
        uploadUrl="oss/file/uploadvariedfile"
      }
      if (this.data.attachmentList.length === 0) {
        return {
          msg: "success",
          data: [],
        };
      }
      // 必须先开了，否则可能会冲突
      wx.showLoading({
        title: "上传文件中",
        mask: true,
      });
      
      // 上传图片，返回地址
      const uploadedList = await new Promise(async (reslove) => {
        
        let { attachmentList } = this.data,
          residueNum = attachmentList.length;
        attachmentList.forEach(async (item, index) => {
          if (item.url == "") {
            const {
              data: { data },
              msg,
            } = await wxUploadFile(
              uploadUrl,
              item.tempFilePath,
              {
                // isMock: true
              },
              formDataParams
            );
            if (msg === "success" && data.code === 0) {
              
              item.url = data.data.url;
              item.error = "";
            }
            console.log("上传附件", data);
          }else{
            item.error = "";
          }
          attachmentList[index] = item;

          residueNum -= 1;
          if (residueNum === 0) {
            reslove(attachmentList);
          }
        });
      });

      wx.hideLoading();

      console.log(uploadedList);

      this.setData({ attachmentList: uploadedList });

      const attachmentsValid = uploadedList.every((item) => item.error === ""),
        attachmentsAllUploaded = uploadedList.every((item) => item.url !== "");
      if (!attachmentsValid) {
        return {
          msg: "invalid",
          error: "文件可能包含非法内容",
        };
      } else if (!attachmentsAllUploaded) {
        return {
          msg: "error",
          error: "上传文件出错，请重试",
        };
      } else {
        return {
          msg: "successs",
          data: uploadedList.map((item) => {
            return {
              name: item.name,
              size: item.size,
              type: item.type,
              url: item.url,
              format: item.format,
            };
          }),
        };
      }
    },
  },
});