网易云信上传图片 点击两次才能上传图片

网易云信上传图片 点击两次才能上传图片

原因：之前异步比打开文件夹先执行

需要按两次才能上传文件fileInputElement.value的值永远是

需要监视文件选择器有没有选择文件，如果选择了再执行异步，没有选择就取消

    const fileInputElement = ref<null | HTMLElement>(null);
    const percentage = ref("");
    const percentage2 = ref("");
    function handleFileChange(event: Event) {
      const inputElement = event.target as HTMLInputElement;
      if (inputElement.files && inputElement.files.length > 0) {
        // 用户选择了文件，更新 percentage 的值为文件名
        percentage2.value = inputElement.files[0].name;
        console.log("选择了文件");
        successupload();
      } else {
        // 用户取消了选择，更新 percentage 的值为空
        percentage2.value = "";
        console.log(" 用户取消了选择");
      }
    }
    function uploadpic() {
      console.log(fileInputElement.value);
      fileInputElement.value!.dispatchEvent(new MouseEvent("click"));
    }
    const typeimage = "image";
    function successupload() {
      var errors = null;

      $uikit.sendFile({
        scene: "p2p",
        to: useraccount,
        type: typeimage,
        fileInput: fileInputElement.value,
        fastPass: '{"w":200,"h":110}',
        beginupload: function (upload) {},
        uploadprogress: function (obj) {
          console.log("文件总大小: " + obj.total + "bytes");
          console.log("已经上传的大小: " + obj.loaded + "bytes");
          console.log("上传进度: " + obj.percentage);
          console.log("上传进度文本: " + obj.percentageText);

          percentage.value = obj.percentageText;

          setTimeout(
            () => {
              percentage.value = "";
            },
            obj.percentageText === "100%" ? 1000 : 0
          );
        },
        uploaddone: function (error, file) {
          console.log("上传" + (!error ? "成功" : "失败"));
          errors = error;
          fileInputElement.value = null;
        },
        beforesend: function (msg) {
          console.log("正在发送p2p image消息, id=" + msg.idClient);
          //上传成功后才行把
          if (!errors) {
            pushMsg(msg);
          }
        },
      });
    }

              <button
                class="btn btn-sm btn-icon btn-active-light-primary me-1"
                type="button"
                data-bs-toggle="tooltip"
                title="Coming soon"
                @click="uploadpic"
              >
                <span class="svg-icon svg-icon-2">
                  <inline-svg :src="getAssetPath('media/svg/chat/pic.svg')" />
                </span>

                <input
                  type="file"
                  accept="image/*"
                  ref="fileInputElement"
                  style="display: none"
                  @change="handleFileChange($event)"
                />
              </button>