AntmJS/vantui

能写一个 uploader 组件 status，真正用起来的示例么？

Opened this issue · 2 comments

sickeeer commented 
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么

Moonisky commented

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

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