如何在javascript中克隆文件对象？
在JavaScript中，要克隆文件对象可以通过以下步骤实现：
- 首先，获取原始文件对象，可以通过文件输入框的
files属性或者通过File构造函数创建一个文件对象。 - 创建一个新的
FileReader对象，用于读取原始文件对象的内容。 - 使用
FileReader对象的readAsArrayBuffer方法读取原始文件对象的内容，并在读取完成后触发load事件。 - 在
load事件的回调函数中，获取FileReader对象的result属性，该属性包含了原始文件对象的内容。 - 使用原始文件对象的
name、type和lastModified属性创建一个新的文件对象。 - 将
FileReader对象的result属性赋值给新的文件对象的data属性。
下面是一个示例代码：
function cloneFileObject(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = function(event) {
const clonedFile = new File([event.target.result], file.name, { type: file.type, lastModified: file.lastModified });
resolve(clonedFile);
};
reader.onerror = function(event) {
reject(event.target.error);
};
reader.readAsArrayBuffer(file);
});
}
// 使用示例
const originalFile = document.getElementById('fileInput').files[0];
cloneFileObject(originalFile)
.then(clonedFile => {
console.log('Cloned file:', clonedFile);
// 在这里可以使用克隆的文件对象进行后续操作
})
.catch(error => {
console.error('Error cloning file:', error);
});这段代码使用了FileReader对象的readAsArrayBuffer方法来读取文件内容，并在load事件的回调函数中创建了一个新的文件对象。你可以将originalFile替换为你要克隆的文件对象，然后使用clonedFile进行后续操作。
请注意，这只是克隆文件对象的一种方法，具体的实现可能因浏览器的支持情况而有所不同。
相关·内容
1回答
如何从material-ui-dropzone上传的文件中获取Blob？
reactjs、blob、file-read
我正在努力解决以下问题：
在我的react项目中，我使用material-ui-dropzone作为文件上传器。下面是DropZone组件：
import React, { Fragment } from 'react';
import { DropzoneArea } from 'material-ui-dropzone';
class DropZone extends React.Component {
constructor(props) {
super(props);
}
render() {
const {handleF
浏览 66提问于2021-06-03得票数 0
1回答
reactJS windows.FileReader readAsArrayBuffer方法误差
javascript、reactjs、io、filereader
使用拖放区域接收文件并将其替换为字节缓冲区的reactJS中出现错误
TypeError:第一个参数必须是字符串、缓冲区、ArrayBuffer、数组或类似数组的对象.
onDrop = async (file) => {
try {
console.log(file.name);
let reader = new window.FileReader();
reader.readAsArrayBuffer(file); // <<== Error occurred here
const buffer = await Buffer.from(rea
浏览 2提问于2019-12-23得票数 1
回答已采纳
1回答
读取多个文件输入
javascript、angularjs
这是我在文件输入中读取第一项的代码，我如何迭代该输入中的所有项？
function readFile (uploadControlId) {
if (!window.FileReader)
throw "The browser does not support HTML 5";
var element = document.getElementById(uploadControlId);
var def = new $.Deferred();
var file = element.files[0];
var part
浏览 5提问于2015-08-31得票数 0
回答已采纳
1回答
参数为null的Function.prototype.bind
javascript
我对Function.prototype.bind()方法感到非常困惑。
function playsound(raw) {
}
function onfilechange(then, evt) {
var reader = new FileReader();
reader.onload = function (e) {
console.log(e);
then(e.target.result);
};
reader.onerror = function (e) {
console.error(e
浏览 0提问于2014-12-26得票数 37
回答已采纳
1回答
实例化音频文件对象
javascript、file、audio、load
而不是这个工作正常的代码
<input type="file" id="my_file">
<script>
var file = document.getElementById('my_file').files[0],
reader = new FileReader();
reader.onload = function(e) {
//...
}
reader.readAsArrayBuffer(file);
</script>
我想实例化一个对象来播放mp3音频文件
<script>
// f
浏览 1提问于2022-09-03得票数 0
1回答
如何使用文件读取器从文件角度生成SHA1？
javascript、angular、filereader、sha1、cryptojs
我的html页面上有一个输入元素，我可以用它选择1/多个文件。
一旦我选择了我的文件，我想读取每个文件的内容使用一个FileReader，以形成一个SHA1。
一旦我有了SHA1值，我想把它保存在某个地方。
问题是，只有在完成了SHA1的.onload之后，才会接收到FileReader值，而这是在我试图保护它的值之后发生的。
我试图使函数异步，并使用等待等待直到文件被读取，但这是无效的。我试着增加一个承诺，但也没有效果。
我真的不知道该怎么做才能得到想要的结果。请帮帮忙。
这是我在选择文件时调用的角函数：
hashFiles(files: Array<any>){
con
浏览 0提问于2019-05-24得票数 1
回答已采纳
1回答
只指一种类型，但在这里被用作值
javascript、visual-studio-code、create-react-app
错误: js的“承诺”仅指一种类型，但在这里被用作值。
我把"checkJS": true和"jsx": "react"设为jsconfig.json。这不是给ts的。
async function readAsArrayBuffer(blob) {
return new Promise((resolve, reject) => {
let reader = new FileReader();
// @ts-ignore
reader.addEventListener('load&
浏览 0提问于2018-03-09得票数 0
回答已采纳
2回答
在异步/等待中使用承诺
typescript、async-await、es6-promise
我从TypeScript中的异步/等待开始，我对此几乎没有疑问。我编写这个函数是为了从Blob获得ArrayBuffer。
async function readAsArrayBuffer(blob: Blob): Promise<ArrayBuffer> {
return new Promise<ArrayBuffer>((resolve, reject) => {
let reader = new FileReader();
reader.addEventListener('load', e =>
浏览 4提问于2017-08-06得票数 4
回答已采纳
1回答
在Jest中测试包含and和FileReader()的函数
javascript、reactjs、testing、mocking、jestjs
目前正在尝试测试以下功能：
const readFileAsync = (file, use = false) =>
new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => {
resolve(reader.result);
};
reader.onerror = reject;
if (use) reader.readAsDataURL(file);
else reader.readAsA
浏览 2提问于2020-01-03得票数 0
回答已采纳
2回答
如何模拟FileReader的故障
typescript、jasmine、filereader
我有一个创建FileReader的函数。在该函数中，我还设置了load和error事件处理程序
handleFileSelect(files:ArrayLike<File>){
...
let reader = new FileReader()
reader.onload = this.handleReaderLoaded;
reader.onerror = this.handleReaderError;
reader.readAsDataURL(file);
}
}
我希望对handleFileSelect进行单元测
浏览 4提问于2019-01-23得票数 2
2回答
将<input>文件转换为二进制文件
javascript、axios、binary、filereader
我正在尝试将文件从输入元素转换为原始二进制数据，然后借助axios.put将其上传到服务器。
在我看来，代码的主要/问题部分是：
const file = document.getElementById('file').files[0]
async function getBinaryFromFile(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.addEventListener('load&
浏览 3提问于2022-09-16得票数 0
1回答
REACT使用window.FileReader上传多个文件
reactjs、react-redux、filereader
我目前已经实现了将单个文件上传到我的react应用程序，但希望上传多个文件，下面是我用来上传单个文件的代码。可以上传多个文件吗？ captureFile = (event) => {
const file = event.target.files[0]
const reader = new window.FileReader()
reader.readAsArrayBuffer(file)
reader.onloadend = () => {
this.setState({
buffer: Buffer(reader.
浏览 29提问于2019-05-17得票数 2
2回答
JavaScript / ESLint规则的SAPUI5
javascript、ecmascript-6、sapui5、eslint、sap-web-ide
我想转换这个方法，以便在SAP中完全应用ESLint规则：
getBase64Promise: function (file) {
return new Promise((resolve, reject) => { // <--
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => { // <--
浏览 1提问于2018-10-23得票数 1
回答已采纳
2回答
使用redux-api中间件处理图像/jpeg内容
reactjs、redux
我有一个，用于检索image/jpeg内容。我看到的所有示例都涉及JSON数据，因此我复制了getJSON函数，并实现了自己的getImage函数来处理这种内容类型。我现在遇到的问题是，这个blob需要转换为base64，并且必须使用异步函数来完成。所以，在这个异步操作完成之前，我的FSA就会被触发。
我怀疑我需要在RSAA payload处理中以某种方式恢复现有的承诺链，但我不知道如何做到这一点。
下面是带有注释行的代码片段，我需要在其中执行承诺resolve来返回这个结果：
export function fetchSiteThumbnailImage(endpoint) {
re
浏览 6提问于2016-08-07得票数 2
回答已采纳
1回答
控制台中的错误:参数不是Blob类型的
javascript、file-io
<script>
var file = document.getElementById("userFile").files[0];
var reader = new FileReader();
reader.readAsArrayBuffer(file);
var byteArray = reader.result;
console.log(byteArray);
</script>
此代码在控制台中产生此错误:未能在“FileReader”上执行“readAsArrayBu
浏览 4提问于2016-07-19得票数 0
回答已采纳
1回答
以ArrayBuffer身份从相对路径读取文件
javascript、filereader、arraybuffer
我正在尝试使用FileReader API将本地文件读取到ArrayBuffer中，如下所示 let reader = new FileReader();
reader.onload = function(e) {
let arrayBuffer = new Uint8Array(reader.result);
console.log(arrayBuffer);
}
reader.readAsArrayBuffer(new File([], 'data.txt')); 但是我得到了一个空的arrayBuffer 如何在浏览器中将此本地文件作为ArrayBu
浏览 19提问于2020-01-16得票数 2
2回答
为JQuery中的文件对象返回未定义的FileReader
javascript、jquery、html
有人能告诉我为什么当所有的文件属性都被正确地打印出来时，为什么FileReader.readAsArrayBuffer()在下面的代码中返回未定义的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"><
浏览 11提问于2018-02-28得票数 2
回答已采纳
1回答
Javascript承诺不会在此之前等待解决
javascript、asynchronous、ecmascript-6、promise、async-await
我正在编写javascript代码来解析一个巨大的文件(几个GBs)，并且使用FileReader的readAsArrayBuffer函数进行承诺(参见下面)：
function readRaw(fc, length) {
const fileReader = new FileReader();
return new Promise((resolve, reject) => {
fileReader.onloadend = function(value) {
浏览 4提问于2020-05-12得票数 0
回答已采纳
3回答
如何在reactJS中从文件中获取字节数组
javascript、reactjs、html
我有一个上传阿凡达图像的表单，我必须以二进制字符串的格式发送图像文件；到目前为止，我已经尝试了FileReader中的ReadAsBinaryString，但它不起作用：(以下是我的代码：
<form onSubmit={this.onFormSubmit}>
<div className="row justify-content-center mb-2">
<input type="file" id="avatar" accept="image/png, image/jp
浏览 1提问于2019-05-06得票数 8
回答已采纳
2回答
角-异步方法不会返回被拒绝的承诺。
javascript、angular、typescript、asynchronous、promise
我在组件中使用async方法进行文件上传。如下所示：
//component
uploadPhotos = async (event: Event) => {
const upload = await this.uploadService.uploadPhotos(event, this.files, this.urls);
}
调用上载后，UploadService返回带有更新文件和路径文件的promise。该服务与预期的一样，适用于到达promise而不受任何挫折的resolve()。但是，如果调用reject()，代码将继续运行，直到到达reader.onload()中的r
浏览 0提问于2018-10-23得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
