Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

能写一个 uploader 组件 status,真正用起来的示例么? #648

Closed
sickeeer opened this issue May 28, 2024 · 2 comments
Closed

Comments

@sickeeer
Copy link

sickeeer commented May 28, 2024

const valueFormatUpload = (event) => {
    const uuid =
      new Date().getTime() + Math.random().toString(36).substring(2, 8);
    let fileList = [...value];
    const { file } = event.detail;
    // 组件问题,暂时未解决上传中状态标识
    const tempFile = {
      ...file,
      status: "uploading",
      message: "上传中",
      fileId: uuid,
    };
    fileList = fileList.concat(tempFile);
    setValue(fileList);
    upload(tempFile, uuid);
  };
  const upload = (tempFile, uuid) => {
    const url = `${process.env.TARO_APP_BASEURL}/rest/attachTemporaryFile`;
    uploadFile({
      url,
      filePath: tempFile.url,
      fileName: tempFile.originalFileObj.name,
      name: "file",
      formData: {},
      success(res) {
        const result = res.temporaryAttachments?.[0]?.temporaryAttachmentId;
        setValue((v) => {
          let temp = v?.find((i) => (i.fileId = uuid));
          if (!temp) {
            console.log(v);
            return v;
          }
          temp.trueUrl = result;
          temp.status = "done";
          temp.message = null;
          return v;
        });
      },
      fail(res) {
        console.log("fail", res);
        setValue((v) => {
          let temp = v?.find((i) => (i.fileId = uuid));
          console.log(temp);
          if (!temp) {
            return v;
          }
          temp.status = "failed";
          temp.message = "上传失败";
          return v;
        });
      },
    });
  };

<Uploader
        fileList={value}
        compressed
        maxSize={10240000}
        onDelete={deleteFile}
        onOversize={onOversize}
        maxCount={8}
        // accept="all"
        previewImage
        deletable
        onAfterRead={valueFormatUpload}
      />

这是我写的一个例子,因为setState 会一并执行,导致页面仅渲染一次,一直停留到 loading 状态;可以出个官方示例,控制这个status么

@hqwlkj
Copy link
Contributor

hqwlkj commented Jun 11, 2024

@Moonisky
Copy link
Contributor

上传结束后如果需要更新状态,我实验下来这样子做就可以:

const updatedValue = ... // 更新完状态之后的 Uploader 值
setValue(updatedValue.concat([]) // 这样子就能够触发组件内部的 UI 更新

@zuolung zuolung closed this as completed Jul 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants