Question

在使上传的文件在图像文件（* .png，*。jpg / jpeg，*。gif等）以外的文件上显示预览时，我需要如何制作react-dropzone NPM软件包的帮助。全部都可以生成预览）。

当前，当我使用Dropzone在Web表单上上传伴随文件时，如果我上传图片文件（* .png，*。jpg等），则我们设置的预览效果很好，但缩略图较小上传的文件。（请参见下图）

但是，如果我上传另一种类型的文件，例如MS-Outlook * .docx，*。xlsx或Adobe Acrobat * .pdf，它只会给我一个空白框，其中包含损坏的文件图像以及任何{我在其中输入的{1}}文本为“ 上传的文件预览”。（请参见下图）

我们正在使用的代码几乎是从React Dropzon Web Site上的 Preview 示例复制而来的，所以我想知道我是否在这里错过了什么？

这就是我尝试过的内容-

创建一个alt="..." react-dropzone页面，将其设置为接受任何文件类型，并使其能够使用{{3}中的代码进行预览}，在代码<Dropzone>部分的底部具有“预览” <aside>。
拖放任何类型的图像文件（* .png，*。jpg或* .jpeg，*。gif等）。
查看显示的预览（应该可以，图像文件的缩略图）。
现在将任何其他类型的文件（ .doc ， .xls ，*。pdf等）拖放到<Dropzone>上。
查看为该文件显示的预览（应为空白，带有“损坏的文件”图像以及在那里描述文件的<Dropzone>文本）。

Dropzone被导入到文件顶部—

alt="..."

缩略图的样式/ CSS代码—

import React, { Component, /* useCallback */ } from "react";
...
import Dropzone from "react-dropzone";
...

... const thumbsContainer = { display: "flex", flexDirection: "row", flexWrap: "wrap", marginTop: 16 }; const thumb = { display: "inline-flex", borderRadius: 2, border: "1px solid #eaeaea", marginBottom: 8, marginRight: 8, width: 100, height: 100, padding: 4, boxSizing: "border-box" }; const thumbInner = { display: "flex", minWidth: 0, overflow: "hidden" }; const img = { display: "block", width: "auto", height: "100%" }; ...回调函数-

onDrop()

以及在React.JS ... onDrop = (acceptedFiles, rejectedFiles) => { let files = acceptedFiles.map(async file => { let data = new FormData(); data.append("file", file); let item = await axios .post("form/upload", data, { headers: { "X-Requested-With": "XMLHttpRequest", "Content-Type": "application/x-www-form-urlencoded" } }) .then(response => { return Object.assign(file, { preview: URL.createObjectURL(file), filename: response.data.filename }); }) .catch(err => { let rejects = rejectedFiles.map(async file => { let data = new FormData(); await data.append("file", file); console.log("There was an error while attempting to add your files:", err); console.log("The files that were rejected were:\n", rejects.join('\n')); }) }); return item; }); Promise.all(files) .then(completed => { let fileNames = completed.map(function(item) { return item["filename"]; }); this.setState({ files: completed, fileNames: fileNames }); }) .catch(err => { console.log('DROPZONE ERROR:', err); }); }; ...中使用<Dropzone>的实际JSX代码—

return()

预期的行为-

我会首选所有文件类型以生成正确的预览。

我的设置-

MacBook Pro 13英寸2018年
2.7 GHz Intel Core i7处理器
16 GB 2133 MHz LPDDR3 RAM内存
MacOS版本10.14.4
React和React-DOM版本16.5.2
Node.JS版本10.15.2
纱线版本1.15.2
反应Dropzone版本10.1.4
适用于Mac OS的Google Chrome浏览器版本74.0.3729.131（正式版本）（64位）
上传到AWS EC2实例容器服务器。

...所以，我是否做错了什么，因此无法使用“图像”以外的其他文件进行预览？这不是图像文件的功能吗？请告知。

另外两个问题-

如果无法使用... <Form.Field> <label>Upload Files or Screenshots</label> <Dropzone accept={acceptedFileTypes} onDrop={this.onDrop}> {({ getRootProps, getInputProps, isDragActive }) => { return ( <div {...getRootProps()} className={classNames("dropzone", { "dropzone--isActive": isDragActive })} > <input {...getInputProps()} /> {isDragActive ? ( <div> <div className="centered"> <Icon name="cloud upload" size="big" /> </div> <div className="centered">Drop Files Here.</div> <div className="centered"> <Button className="drop-button"> Or Click to Select </Button> </div> </div> ) : ( <div> <div className="centered"> <Icon name="cloud upload" size="big" /> </div> <div className="centered"> Drag and Drop Supporting Files here to Upload. </div> <div className="centered"> <Button className="drop-button"> Or Click to Select </Button> </div> </div> )} </div> ); }} </Dropzone> <aside style={thumbsContainer}>{thumbs}</aside> </Form.Field> ...为除图像文件以外的文件生成预览，是否可以让图像文件生成预览，但是所有其他文件仅列出要上传的文件名，例如在您的https://react-dropzone.js.org/#previews上的其他一些示例中？如果是这样，当您将文件拖放到react-dropzone上时，如何在两者之间切换？
在我们的代码中，我们再次从React Dropzone Web Site的示例中复制了几乎所有字词，我们注意到，当您将文件集拖放到<Dropzone>上，然后尝试进行第二次拖放，将删除第一组文件，并将其替换为刚放在<Dropzone>上的新文件。有没有一种方法可以让<Dropzone>每次在文件中添加文件时都累积添加文件，而不仅仅是清除以前的文件并替换为新文件？如果是这样，请问该怎么做？
在所有其他文件都使用空白框“文件预览”的情况下，有没有办法摆脱“损坏的文件”图标？

请多谢我的建设性答复。预先谢谢你。

如何使react-dropzone中的Preview与图像以外的文件一起使用？

0 个答案: