javascript - 无法在回调函数中调用任何 FineUploader 方法
问题描述
我已autoUpload
设置为false
,因为我想自己将图像上传到我的后端。但是,要做到这一点,我首先需要文件对象。在回调onSubmitted
事件中,我试图将图像 id 传递给getFile
方法,以返回对象。但是,当我尝试这样做时,我收到以下错误消息。
在 onSubmitted: id=0 | 名称=28603454_15219061700_r.jpg index.js:2178
[Fine Uploader 5.16.2] 在 'onSubmitted' 回调中捕获异常 - 无法读取属性 'uploader' of null
我猜我得到这个是因为我声明了一个 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 />
解决方案
this
在javascript中很棘手。在常规函数(例如function f(){...}
)中,this
取决于函数的调用位置而不是定义的位置。通过 3rd 方 api 使用回调时,您实际上无法控制调用它的位置,因此最终可能会出现上述错误。
幸运的是,您可以使用箭头函数(例如)根据函数的定义const f = () => {...};
位置进行绑定。this
有关更多信息,请参阅MDN 文档,或者您可以参考这个出色的 SO 答案。
但是,特别是对于您的代码,我不确定this
当您定义onSubmitted
的只是全局/窗口对象时,其中任何一个都会像您一样工作。
为了使其工作,您需要在顶层创建一个闭包(在您实际创建上传器之前):
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 闭包规则。
推荐阅读
- jhipster - 如何添加额外的健康指标?
- css - Flex 具有一个固定宽度的列和一个必须填充剩余空间的流体列
- extjs - Ext js Pivot Grid Store wrong type
- excel - AddShape 上的运行时错误 13 类型不匹配
- node.js - 是否可以同时使用 Angular 和 NodeJS?
- sqlalchemy - SQLAlchemy:关系在查询级别加载技术值
- ocaml - OCaml“这个'结构'可能是无与伦比的”
- python - Python 到 Mips 模式的转换
- rust - Rust 在同一行代码上加入过滤器和映射
- html - 如何将描边应用到 SVG 元素的边框