根据filestack文档,您应该在 pick
之前调用store
方法
将文件直接保存到S3存储桶(或其他存储)。这适用于来自filepicker.pick调用的Blob或来自
的DOM文件对象<input type="file"/>
虽然文档说明了这一点,但您可以调用store()而不选择pick()
看起来pick
函数显示了用户的界面,这是我不想要的。我只想上传一张他们在.blob中编辑为变量的画布图片,这可能吗?
var canvasImage = canvas.toDataURL("image/png");
var blob = {
mainFile: canvasImage,
filename: this.file.name + '_edited',
isWriteable: true,
};
postFile(blob) {
var _this = this;
this.filepickerService.store(blob,
{
mimetype: "text/plain",
location: "S3",
path: "muhPath"
container: _this.appConfig.s3Bucket
},
function(new_blob){
console.log(JSON.stringify(new_blob));
}
);
}
如果我定义了网址而不是blob,则调用postFile
似乎才有效。它会抛出一个blob:
Cannot store given input: " + input + ". Not a string, file input, DOM File, or FPFile object.
答案 0 :(得分:3)
因此,看起来您正在尝试将filepicker.store()方法传递给画布数据网址。这不是API可以处理的内容。
它将使用原始base64字符串(您还需要传递base64decode参数),标准文件输入a DOM File或前一个Filestack事务(fpFile对象)的响应。
画布数据网址可能是这样的: &#34;数据:图像/ GIF; BASE64,R0lGODlhAQABAIAAAAAAAP /// ywAAAAAAQABAAACAUwAOw ==&#34;
Filestack API期望的是: &#34; R0lGODlhAQABAIAAAAAAAP /// ywAAAAAAQABAAACAUwAOw ==&#34;
这是一个使用store来保存base64字符串的示例。 https://jsfiddle.net/amione/tq2zqtg1/
var data = "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";
Here is an example
filepicker.setKey("AtpK5JtiRgm3nWbe1vlI1z");
filepicker.store(
data, {
base64decode: true,
filename: 'image.png'
},
function(Blob) {
console.log("Store successful:", JSON.stringify(Blob));
addLink(Blob);
},
function(FPError) {
console.log(FPError.toString());
},
function(progress) {
console.log("Loading: " + progress + "%");
}
);
function addLink(data) {
$("#results")
.append(
'<li><a target="_blank" href="' +
data.url + '">' + data.filename + '</a></li>'
);
}
&#13;
<script src="https://api.filestackapi.com/filestack.js"></script>
<ul id="results">
</ul>
&#13;