Невозможно вызвать методы FineUploader в функции обратного вызова. - PullRequest
Новая
       7

Невозможно вызвать методы FineUploader в функции обратного вызова.

0 голосов
/ 28 августа 2018

У меня autoUpload установлено значение false, так как я хочу загрузить изображения самостоятельно в свой бэкэнд. Однако, чтобы сделать это, мне сначала нужен объект файла. В событии callbacks onSubmitted я пытаюсь передать идентификатор изображения методу getFile, чтобы вернуть объект. Однако, когда я пытаюсь сделать это, я получаю сообщение об ошибке ниже.

в onSubmitted: id = 0 | name = 28603454_15219061700_r.jpg index.js: 2178

[Fine Uploader 5.16.2] Поймано исключение в обратном вызове onSubmitted - Невозможно прочитать свойство 'uploader' с нулевым значением

Я предполагаю, что получил это, потому что я объявляю объект const и ссылаюсь на него одновременно, что, я полагаю, вы не можете сделать ...

Итак, есть ли идеи о том, как я могу вызывать методы в функции callbacks? Или есть другой способ? 

const uploader = new FineUploaderTraditional({
  options: {
    maxConnections: 1,
    autoUpload: false,
    deleteFile: { enabled: true, endpoint: "/uploads" },
    request: { endpoint: "/uploads" },
    retry: { enableAuto: true },
    callbacks: {
      onSubmitted: function(id, name) {
        console.log("in onSubmitted: id=" + id + " | name=" + name);
        // getFile(id) returns a `File` or `Blob` object.
        console.log(this.uploader.getFile(id));
      }
    }
  }
});

Обновление Теперь я взял весь свой код для тонкой загрузки и создал новый компонент с ним. Я все еще сталкиваюсь с теми же проблемами. Код компонента ниже:

FineUploader.jsx 

import React, { Component } from "react";
import FineUploaderTraditional from "fine-uploader-wrappers";
import Gallery from "react-fine-uploader";
import Filename from "react-fine-uploader/filename";
import "react-fine-uploader/gallery/gallery.css";

const util = require("util");

const uploader = new FineUploaderTraditional({
  options: {
    // debug: true,
    maxConnections: 1,
    autoUpload: false,
    deleteFile: { enabled: true, endpoint: "/uploads" },
    request: { endpoint: "/uploads" },
    retry: { enableAuto: true },
    validation: {
      acceptFiles: ".jpg,.png,.gif,.jpeg",
      allowedExtensions: ["jpg", "png", "gif", "jpeg"],
      itemLimit: 5,
      sizeLimit: 5000000
    },
    callbacks: {
      onCancel: function() {
        console.log("in onCancel: ");
      },
      onComplete: function(id, name, responseJSON, xhr) {
        console.log("in onComplete: " + id + " | " + name + " | " + responseJSON + " | " + xhr);
      },
      onAllComplete: function(succeeded, failed) {
        console.log("in onAllComplete: " + succeeded + " | " + failed);
      },
      onProgress: function(id, name, uploadedBytes, totalBytes) {
        console.log("in onProgress: " + id + " | " + name + " | " + uploadedBytes + " | " + totalBytes);
      },
      onError: function(id, name, errorReason, xhr) {
        console.log("in onError: " + id + " | " + name + " | " + errorReason + " | " + xhr);
      },
      onDelete: function(id) {
        console.log("in onDelete: " + id);
      },
      onDeleteComplete: function(id, xhr, isError) {
        console.log("in onDeleteComplete: " + id + " | " + xhr + " | " + isError);
      },
      onPasteReceived: function(blob) {
        console.log("in onPasteReceived: " + blob);
      },
      onResume: function(id, name, chunkData, customResumeData) {
        console.log("in onResume: " + id + " | " + name + " | " + chunkData + " | " + customResumeData);
      },
      onStatusChange: function(id, oldStatus, newStatus) {
        console.log("in onStatusChange: " + id + " | " + oldStatus + " | " + newStatus);
      },
      onSubmit: function(id, name) {
        console.log("in onSubmit: " + id + " | " + name);
      },
      onSubmitted: function(id, name) {
        console.log("in onSubmitted: id=" + id + " | name=" + name);
        // getFile(id) returns a `File` or `Blob` object.
        // console.log(this.uploader.getFile(id));
        // console.log(uploader.getFile(id));
        // nothing here is working.... :(
      },
      onUpload: function(id, name) {
        console.log("in onUpload: " + id + " | " + name);
      },
      onValidate: function(data, buttonContainer) {
        console.log(
          "in onValidate: " + util.inspect(data, { showHidden: true, depth: null }) + " | " + buttonContainer
        );
      },
      onSessionRequestComplete: function(response, success, xhrOrXdr) {
        console.log("in onSessionRequestComplete: " + response + " | " + success + " | " + xhrOrXdr);
      }
    }
  }
});

const fileInputChildren = <span>Click to Add Photos</span>;
const statusTextOverride = {
  upload_successful: "Success!"
};

class FineUploader extends Component {
  constructor() {
    super();

    this.state = {
      submittedFiles: []
    };
  }

  componentDidMount() {
    uploader.on("submitted", id => {
      const submittedFiles = this.state.submittedFiles;
      console.log("submittedFiles: " + submittedFiles);

      submittedFiles.push(id);
      this.setState({ submittedFiles });
    });
  }

  render() {
    return (
      <div>
        {this.state.submittedFiles.map(id => (
          <Filename id={id} uploader={uploader} />
        ))}
        <Gallery
          fileInput-children={fileInputChildren}
          status-text={{ text: statusTextOverride }}
          uploader={uploader}
        />
      </div>
    );
  }
}

export default FineUploader;

И - На главной странице сейчас я импортирую FineUploader.jsx и использую компонент. 

import FineUploader from "../../components/FineUploader";

В моем методе рендеринга у меня есть: 

<FineUploader />

Ответы [ 2 ]

0 голосов
/ 14 октября 2018

Вместо console.log(this.uploader.getFile(id)); попробуйте: 

console.log(uploader.methods.getFile(id));
0 голосов
/ 04 сентября 2018

this сложно в JavaScript. В обычных функциях (например, function f(){...}) this зависит от того, где функция называется , а не от того, где она определена. Используя обратные вызовы через сторонние API, вы не можете контролировать, где он вызывается, поэтому вы можете получить ошибки, подобные описанным выше.

К счастью, вы можете использовать функции стрелок (например, const f = () => {...};) для привязки this в зависимости от того, где определена функция .

См. MDN документы для получения дополнительной информации или вы можете сослаться на этот превосходный ответ SO .

Тем не менее, для вашего кода, я не уверен, что любой из них будет работать как ваш this, когда вы определяете onSubmitted просто как объект global / window.

Чтобы это работало, вам нужно создать замыкание на верхнем уровне (прямо перед тем, как вы фактически создадите загрузчик): 

function onSubmitted(id, name) {
    console.log("in onSubmitted: id=" + id + " | name=" + name);
    // getFile(id) returns a `File` or `Blob` object.
    console.log(uploader.getFile(id));
}

const uploader = new FineUploaderTraditional({..., callbacks: {onSubmitted, ...}});

Это позволит вам определить логику взаимодействия с загрузчиком до того, как вы на самом деле создадите его экземпляр (что выглядит так, как вы хотите). Обратите внимание на отсутствие this, поскольку мы просто пользуемся правилами закрытия js.

...