原生js实现图片/PDF导入(PDF导入需后端处理)

  public onUpload(): void {
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.accept =
      'image/gif,image/jpeg,image/jpg,image/png,image/svg,.svg,application/pdf';
    let file: File = null;
    const readPDFPromise = new Promise<File>((resolve, reject) => {
      fileInput.addEventListener('change', (_) => {
        file = fileInput.files[0];
        const fileSize = Math.floor(file.size / (1024 * 1024));
        if (fileSize > this._limitSize) {
          this.baseContext.srvMessage.info(
            `文件太大，目前图片仅支持小于${this._limitSize}M的图片文件！`,
            5000
          );
          return;
        }

        if (file.type !== 'application/pdf') {
          const reader = new FileReader();

          reader.onload = (e) => {
            const dataURL = reader.result;
            const img = new Image();
            img.onload = () => {
              this.createTextureAsset(
                file,
                this._width || img.width,
                this._height || img.height
              );
            };
            img.src = <string>dataURL;
          };
          reader.readAsDataURL(file);
        }
        resolve(file);
      });
    });

    fileInput.click();

    // importPDF
    let imgUrl: string = '';
    readPDFPromise
      .then((file) => {
        if (file.type === 'application/pdf') {
          const formData = new FormData();
          formData.append('file', file);
          formData.append('id', '');
          formData.append('type', file.type);
          formData.append('burnafterreading', 'true');

          formData.append('reason', 'udesign::upload_drawing_pdf');
          formData.append('refer', this.baseContext.doc.id);

          const params: any = {
            formData: formData,
            // we need the resultant image in the future
            // let's store in storage
            burnafterreading: false,

            // you can choose svg or png
            output: this.pdfTrans2PNG ? 'png' : 'svg',
          };
          //后端处理pdf=>image.png
          return new Promise((resolve, reject) => {
            this.showLoading = true;
            this.baseContext.srvCloud.callFnc(
              'processPDF',
              params,
              (err, res) => {
                if (!err && res) {
                  resolve(res);
                } else {
                  reject(new Error('process pdf error'));
                }
              }
            );
          });
        } else {
          return new Promise(() => { }); //终止Promise
        }
      })
      .then((res: any) => {
        this.showLoading = true;
        imgUrl = res.path;

        return this._impl.loadImage(imgUrl);
        // return new Promise((resolve, reject) => {
        //   resolve({
        //     texture: null,
        //     pathResolve: this.baseContext.cloudService.callUtilSyncMethod(
        //       'resolveStoragePath',
        //       res.path
        //     )
        //   });
        // });
      })
      .then(({ texture, pathResolve }) => {
        return pathResolve;
      })
      .then((path) => {
        // return this._impl.getImgToBase64(path);
        return path;
      })
      .then((dataUrl) => {
        this.getImageFileFromUrl(dataUrl, file.name + '.png', file => {
          const reader = new FileReader();
          reader.onload = (e) => {
            const dataURL = reader.result;
            const img = new Image();
            img.onload = () => {
              this.createTextureAsset(
                file,
                img.width,
                img.height
              );
            };
            img.src = <string>dataURL;
          };
          reader.readAsDataURL(file);
        });
      })
      .catch((err) => {
        console.error(err);
        this.baseContext.srvMessage.info('PDF文件导入失败', 5000);
        this.showLoading = false;
      });
  };


  getImageFileFromUrl(url, imageName, callback) {
    // imageName一定要带上后缀
    var blob = null;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.setRequestHeader('Accept', 'image/png');
    xhr.responseType = "blob";
    xhr.onload = () => {
      //console.log('111')
      if (xhr.status == 200) {
        blob = xhr.response;
        let imgFile = new File([blob], imageName, { type: 'image/png' });
        //console.log(imgFile)
        callback.call(this, imgFile);
      }
    };
    xhr.send();
  }