React JS多图上传预览

Question

使用ReactJS，我需要多个图片上传并预览。我尝试使用下面的代码，但它不起作用，控制台显示错误信息：

Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

uploadImage(e){
    var numFiles = e.target.files.length; 
    for (var i = 0, numFiles = e.target.files.length; i < numFiles; i++){ 
            var file = e.target.files[i];
            if(!file.type.match('image'))
            continue;
            var reader = new FileReader();
        reader.onload = function(e) {
            setOfImages.push({
              fileName:file.name,
              image:e.target.result.split(',')[1]
            });
            for(var j = 0; j<setOfImages.length; j++) {
                $('.placeholder-blk').prepend('<div class="image-placeholder"><img src="data:image/jpeg;base64,'+ setOfImages[j].image +'" /></div>');
            }
            console.log(setOfImages);
        }
        reader.readAsDataURL(file);
    }
}
<input type="file" name="image-uploder" id="image-uploder" className="file-loader" onChange={this.uploadImage.bind(this)} multiple />

- Murali Raj

---

这句话没有意义：$('.placeholder-blk').remove();，然后随后又试图在其前面添加？它已经不存在了。 - Mark Schultheiss

这里只是第一个文件吗？ var file = e.target.files[0]; 你是不是想处理多个文件 var numFiles = e.target.files.length; for (var i = 0, numFiles = e.target.files.length; i < numFiles; i++) { var file = e.target.files[i]; .. } - Mark Schultheiss

是的，我也可以上传多个图像文件。@MarkSchultheiss - Murali Raj

参考此处如何进行原始操作：https://developer.mozilla.org/zh-CN/docs/Using_files_from_web_applications - Mark Schultheiss

谢谢@MarkSchultheiss，我得到了输出，但是当我在div前面添加时，它会复制div，现在我已经编辑了上面的代码并更新了一个。 - Murali Raj

Answer 1

你是否尝试将值添加到状态中，并从状态中获取名称呢？ 类似这样：

<input type="file" name={this.state.setOfImages} id="image-uploder" className="file-loader" onChange={this.uploadImage.bind(this)} multiple />

在你的函数内部填充状态。

this.setState({setOfImages: JSON.stringify(setOfImages)})

类似于这样的东西。

export class Demo extends React.Component{
constructor(props){
    super(props)
    this.state = {
        setOfImages : []
    }
}
setOfImages(event){
    event.preventDefault();
    this.setState({
        setOfImages: ["hello", "hi"]
    })
}
render(){
    return (
        <div>
            <input value={this.state.setOfImages}/>
            <button onClick={this.setOfImages.bind(this)}/>
        </div>
    )
}
}

现在首先输入将被填充为空数组。当您单击按钮时，状态将通过设置setOfImages = ["hello", "hi"]并将输入值设置为这些值而发生更改。

- Sampath

Answer 2

这根本没有意义 $('.placeholder-blk').remove(); 然后随后又试图在其之前插入？它已经消失了。

而这里只是第一个文件？ var file = e.target.files[0]; 你是指要处理这些文件吗？

var numFiles = e.target.files.length; 
for (var i = 0, numFiles = e.target.files.length; i < numFiles; i++) 
{ var file = e.target.files[i]; .. }

这里提供如何以原始方式完成它的参考：developer.mozilla.org/en-US/docs/

- Mark Schultheiss