使用FileReader错误处理Angular + FileList
使用FileReader错误处理Angular + FileList
在Angular中，可以使用FileReader对象来读取本地文件。当使用FileReader读取文件时，可能会遇到一些错误。下面是处理这些错误的一些方法：
- 错误类型
FileReader对象可能会抛出以下错误类型：
- NOT_FOUND_ERR：文件未找到错误
- NOT_READABLE_ERR：文件不可读错误
- ABORT_ERR：读取操作被中止错误
- SECURITY_ERR：安全错误
- ENCODING_ERR：编码错误
- UNKNOWN_ERR：未知错误
- 错误处理方法 在Angular中，可以使用try-catch语句来捕获和处理FileReader的错误。以下是一个示例：
- 错误处理方法 在Angular中，可以使用try-catch语句来捕获和处理FileReader的错误。以下是一个示例：
- 在上面的示例中，我们使用try-catch语句来捕获可能发生的错误。在onerror回调函数中，我们可以通过event.target.error属性来获取错误信息。
- 应用场景 FileReader错误处理适用于需要读取本地文件并处理文件内容的场景。例如，上传文件到服务器前需要对文件进行预处理或验证。
- 推荐的腾讯云相关产品和产品介绍链接地址
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云云函数（SCF）：https://cloud.tencent.com/product/scf
- 腾讯云云数据库MySQL版（TencentDB for MySQL）：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
请注意，以上链接仅供参考，具体产品选择应根据实际需求和情况进行评估和决策。
相关·内容
1回答
我正在尝试将一个选定的文件解析为Angular 7中的对象数组。 我在其中选择文件的HTML： <div class="form-group" *ngIf="import">
<label for="file">Choose backup file</label>
<input type="file" id="file" (change)="handleFileInput($event.target.files)">
</div>
浏览 28提问于2019-01-28得票数 1
回答已采纳
1回答
我有一个角度应用程序，在这个应用程序中，用户上传一个文件，然后在UI上显示文件的内容。该文件可能很长，所以我需要垂直滚动和更长的行，我想有水平滚动。因此，我想我需要一个框，在其中我将显示内容水平和垂直滚动。
app.component.ts代码
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component
浏览 1提问于2020-05-18得票数 1
回答已采纳
我想把html附加到一个div中，我想让它编译变量，循环和字符串中所有的angular组件，我通过文本文件上传html，我知道这可以在angularjs中使用$compile完成，但是我如何在angular最新版本中实现它，我已经尝试过safehtml方法，但不幸的是它不起作用。 my component.ts
model = {
name: "junaid",
age: 24
};
title = "twig-alternate";
htmlStr: string = ``;
@ViewChild('dataConta
浏览 13提问于2020-09-03得票数 0
回答已采纳
我的app.component.ts代码
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
fileContent: string = '';
public onChange(fi
浏览 14提问于2020-05-19得票数 0
下面是我的代码，但我没有定义：
onChange(fileList: FileList): void {
var file = fileList[0];
var fileReader = new FileReader();
var newFile = {};
fileReader.readAsText(file, 'UTF-8');
fileReader.onload = () => {
newFile = fileReader.result as object;
this.updateObj = clone
浏览 3提问于2021-04-16得票数 0
回答已采纳
4回答
我有类似于这些代码行的东西：
jQuery('.js-img-input').on('change', handleNewFiles);
var handleNewFiles = function(event) {
var fileList = event.target.files;
loadFileList(fileList);
};
var loadFileList = function(fileList) {
jQuery(fileList).each(function(key, file) {
readF
浏览 3提问于2016-03-31得票数 4
1回答
我有一个简单的输入文件，只接受图像。我想在上传任何小于2mb大小的图像时显示成功消息。但当我选择图像和检查元素时，图像正在转换为base64格式，并且base64字符串的大小超过了图像的实际大小(4/3比率)。
我的问题是
如何保持与实际图像相同的大小。？是否有其他方法来修复它。
我的代码是：
<input type="file" onchange="uploadImage(event)" />
jQuery
function uploadImage(event){
var fileReader = new FileReader();
if (fi
浏览 0提问于2019-10-17得票数 0
1回答
我正在使用来自P5.JS的LoadBytes函数，它返回一个对象，但是我无法通过使用".bytes“或”字节“来访问" object”。
由于某些原因，当运行一个实时服务器时，它似乎工作得很完美。
function get_rom () {
var fileList = document.getElementById("rom").files;
var fileReader = new FileReader();
if (fileReader && fileList && fileList.len
浏览 0提问于2021-06-17得票数 0
回答已采纳
我想选择一个文件并将其加载到angular js中。
一切都很好，唯一的问题是图像不再刷新。我可以看到一切正常，因为当我用angular.js切换页面上的on菜单时，图像正在刷新。
下面是我的代码：
<div ng-controller="TopMenuCtrl">
<button class="btn" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<input ng-model="p
浏览 1提问于2013-05-19得票数 5
回答已采纳
3回答
save(event: any, type, image_type) {
this.uploadImageFlag = true;
const fileList: FileList = event.target.files;
if (fileList.length > 0) {
const file: File = fileList[0]
this.files.set('files', file, file.name)
const reader = new FileReader();
r
浏览 2提问于2018-03-23得票数 5
我有一个Next.js应用程序，我正在尝试使用FileReader来读取一个“上传”文件的内容。 我的组件如下所示： let fileReader;
let props = {
multiple: false,
onRemove: file => {
const index = fileList.indexOf(file);
const newFileList = fileList.slice();
newFileList.splice(index, 1);
setFileList(newFileList);
浏览 11提问于2020-07-03得票数 0
回答已采纳
2回答
我有一个函数要上传，但是我有以下错误：
属性“File”在“窗口”类型上不存在。属性“FileList”在“窗口”类型上不存在。属性“FileReader”在“窗口”类型上不存在。属性“结果”在类型'EventTarget‘上不存在。
我的组件
import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
import { UploadService } from './upload.service';
import 'jquery-
浏览 7提问于2019-10-21得票数 4
回答已采纳
我是AngularJS，HTML5和JavaScript的新手。我正在用angularjs做一个读取文本文件的服务。我正在使用HTML5文件读取器API。问题是事件“onload”(或其他)不会触发。这是服务：
angular.module('uploadFiles').factory('readFileAsTextService', function () {
return {
readFile: function (file) {
var reader = new FileReader();
浏览 2提问于2014-04-27得票数 2
回答已采纳
有人能解释一下this.imagesResults.push({src: reader.result});抛出这个错误的原因吗：Cannot read property 'imagesResults' of undefined
我试图将每个文件从FileList转换为Base64，并将结果放入数组中，我不明白为什么它说ImageResults是未定义的，我尝试了所有可能的方法，甚至尝试设置超时以确保它是定义的，但我无法弄清楚。
import {AfterViewInit, Component, Input, OnInit} from '@angular/core'
浏览 5提问于2021-05-17得票数 0
我正在使用以下代码片段来读取javascript中的文件：
if(window.FileReader && filelist.length > 0) {
var reader = new FileReader();
reader.onload = reader.onloadend=function(event){
self._ogrUpload(self, event);
};
reader.readAsText(filelist[i]);
console.log(filelist[i]);
}
这在Chrome中很
浏览 1提问于2012-09-28得票数 2
回答已采纳
在HTML文件中，我创建了一个上传文件的按钮：
<span id='upload' class="btn btn-default btn-file">Upload<input type="file" id="input" onchange="this.files"></span>
在Javascript文件中：
//this event click event on the upload buttom, and parse filelist to handleFiles fun
浏览 2提问于2015-08-09得票数 1
所以我现在正在做一个带有CSV文件上传的项目。我可以console.log的csv，但它不是UTF-8编码。我得到的数据中有典型的�符号。
这是我的代码库：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
浏览 3提问于2020-04-07得票数 2
回答已采纳
这里我们需要添加测试用例，因为我们需要在反应式表单中使用angular 6上传一个使用输入类型的文件。在上传文件并将其作为响应发送到API时，我们在报头中得到的响应如下 test_template: "C:\fakepath\Copy of Task_angular_issue and change_logs.xlsx" 但在我们得到的回应中， {
"Status": "Error",
"Message": "Following parameter(s) are missing: test_script,test
浏览 11提问于2019-02-18得票数 1
有一个通过给定名称写入文件的代码。有一个哈希表可以从中读出。写作是成功的，阅读也是成功的。
但是这个文件找不到了。
下面是这样写的代码：
public void attachUrlToGuid(String url, String guid) {
ObjectMapper mapper = new ObjectMapper();
fileList.put(url, guid);// doesn't matter if url already exist or have a different guid - just replacing with the new valu
浏览 1提问于2013-11-10得票数 0
1回答
我有一个客户端试图通过BLE向服务器发送图像。
客户代码
//BoilerPlate to setup connection and whatnot
sendFile.onclick = async () => {
var fileList = document.getElementById("myFile").files;
var fileReader = new FileReader();
if (fileReader && fileList && fileList.length) {
fileReader.readAsArr
浏览 2提问于2022-08-01得票数 0
我通过Nodejs构建了一个本地服务器。我只想从我的网站上传一个文件。当我通过axios从网站发送一个post请求时，我的本地主机只接收一个空对象({})的req.body。我一点也不知道。这是密码。字体结尾：
let fileList = this.$refs.getPic.files
let file = fileList[0]
let fileReader = new FileReader()
fileReader.readAsDataURL(file)
fileReader.addEventLi
浏览 3提问于2022-06-05得票数 0
我正在尝试创建一个用户界面，允许用户从他们的计算机下载mp3s到播放列表。现在我已经知道了这首歌的名字和黎族的href，它指向了正确的歌曲。但是现在我想知道如何在用户每次点击li时在一个audio元素上播放一首歌曲。现在看起来是这样的： ? 我的状态是这样的： ? 下面是我的代码： class DownloadTest extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.
浏览 12提问于2019-12-18得票数 1
回答已采纳
当我在Chrome中通过ajax上传文件时，我正试图处理从请求中删除的文件。
当文件被删除或浏览时，我使用FileReader准备文件：
// initialise fileListData array
fileListData = new Array(fileList.length);
// start reading files
for (var i=0; i<fileList.length; i++) {
// update fileListData file status
fileListData[i] = {
浏览 0提问于2015-09-09得票数 1
回答已采纳
public void populatePrizeArraylist()
{
ArrayList <Prize> prizeArrayList = new ArrayList <Prize>();
// The name of the file which we will read from
File filename = new File("prizes.txt");
try
{
// Prepare to read from the file, using a Scanner o
浏览 0提问于2015-05-23得票数 1
回答已采纳
1回答
嗯，我正在学习如何建立一个意味着堆栈的应用程序，并试图做一个电子商务类型的应用程序。我的问题与图片上传有关。 我试图一次上传多个文件，但我总是得到一个错误，这来自我的mime类型验证。 mime.type.validation.ts： import { AbstractControl } from '@angular/forms';
import { Observable, Observer, of } from 'rxjs';
export const mimeType = (
control: AbstractControl
): Promise&
浏览 12提问于2018-12-19得票数 0
我是angular 2/4的新手，我想解析csv文件并在表格中显示信息。我尝试了一些东西，但数据在控制台中显示，我希望他们在网页中的表格。有没有人能帮我？
selectFile(files: FileList) {
console.log(files);
if(files && files.length > 0) {
let file : File = files.item(0);
let reader: FileReader = new FileReader();
reader.readAsText(file);
reader.
浏览 1提问于2018-03-15得票数 1
我试图读取多个文件并将其添加到数组中。我已经发现readAsArrayBuffer是一个异步函数，所以我需要等待以前的上传结束。我试图使用回调，但失败了。
<form enctype="multipart/form-data">
<input id="file-input" type="file" multiple="" accept="image/*">
</form>
<div id="upload-list"></div>
以下是
浏览 7提问于2017-10-13得票数 3
回答已采纳
我正在创建一个练习使用Django(drf)和angular 8的应用程序，我想在验证失败的情况下显示Django发送的错误消息。 问题是，在使用{observe：'events'}执行HTTP post时，使用{observe：'events'}作为进度条，我无法在angular中获取包含错误消息的响应体。 角码 postData(
fileToUpload: File,
empName: string,
dept: string
): Observable<any> {
const formData: For
浏览 18提问于2020-08-11得票数 0
嗨，我做了一个多上传文件按钮与蚂蚁设计。我的目标是用文件列表更新状态fileList，并将originFileObj转换为base64字符串。问题是，我的函数只为fileList中的所有文件返回一个fileList字符串。这是我的代码：
import React from 'react';
import { Upload } from 'antd';
export default class MultiUpload extends React.Component {
constructor(props: any) {
super(props);
浏览 3提问于2020-03-09得票数 3
我正在读取一个文件，并希望将其保存在数组列表中，以便能够在另一个类中调用此方法，以便以后使用。这是我的密码：
package com.qmul.rfid.reader;
import java.io.BufferedReader;
import java.io.FileReader;
import java.io.IOException;
import java.util.ArrayList;
public class ReadFile {
public static void main(String[] args) {
ArrayList
浏览 1提问于2014-02-18得票数 0
回答已采纳
2回答
我的应用程序加载了用户‘pc的file.json：
app.component.html
<div class="file btn btn-lg btn-primary">
Upload
<input type="file" class="upload" (change)="changeListener($event.target.files)">
</div>
在我的app.component.ts里
user: User;
userArray: Array
浏览 0提问于2018-04-30得票数 0
使用文件上传，我试图获取json数据。
文件上传代码：
<input
accept=".json"
id="contained-button-file"
multiple
type="file"
onChange={ (e) => this.handleChange(e.target.files) }
/>
<label htmlFor="contained-button-file">
浏览 2提问于2020-09-16得票数 0
回答已采纳
我的代码是：
addFilesforRNAppz(inputFile: any) {
const fileget = this.fileInputVariable.nativeElement.files;
let fileList: FileList = inputFile.target.files;
// I can access the selected file name, size and object correctly without any issues
console.log("File name = " + fileList[0].name);
浏览 0提问于2018-09-11得票数 3
我无法在Internet Explorer中显示图像预览。
我使用的是FileReader()，它适用于所有浏览器，但不适用于ie(版本9)及更低版本。
我需要FileReader的替代选项来显示预览。
$('#FileUpload').live('change', function () {
var result = checkFileType();
alert(result);
var fileList = this.files;
var file = f
浏览 0提问于2012-11-16得票数 0
我试图从我的.txt程序中读入一个充当数据库的Java文件。在通过TextEdit和使用Java FileWriter类运行程序之前，我已经向该文件写入了内容，但是在运行这些代码行之后，程序仍然显示一个空数组。这是唯一造成问题的地方，当我使用ArrayList作为临时数据库时，代码的其余部分(这里没有显示)运行得很好。有人能帮我找出为什么.txt文件总是空的吗？
String filePathName = "User Data.txt";
File userFile = new File(filePathName);
if (userFile.createNewFile())
浏览 0提问于2021-01-06得票数 1
我有一个AngularJS网络应用程序，在那里我使用<file type='input' accept='image/*'>来选择图片。
我通过绑定文件输入的change事件、用FileReader的readAsDataURL方法读取它并将结果分配给图像的src属性，将新选择的图像显示给用户。
input.bind('change', function (evt) {
var fileList = evt.target.files;
if (fileList != null) {
var file = f
浏览 2提问于2014-10-28得票数 2
1回答
我想在提交之前显示上传视频文件的预览。由于下面的JS，我已经成功地用图片完成了这个任务，但是它没有处理视频文件.
$(document).ready(function() {
if (window.File && window.FileList && window.FileReader) {
$("#files").on("change", function(e) {
var files = e.target.files,
filesLength = files.length;
浏览 1提问于2015-01-06得票数 1
1回答
角js图片上传如何检查宽度和高度示例我的withd=200和heidht =200，如果给出超过像素，它的显示是错误的，我怎么能我们，如果我尝试一些东西，可以解决它
<div class="form-group">
<label class="col-sm-2 control-label">Logo :</label>
<div class="col-sm-4">
<input filestyle="" type="file"
浏览 3提问于2016-09-02得票数 0
1回答
我需要在输入时加载一个文件。这段代码可以在chrome、opera和firefox中运行，但不能在IE中运行：
$("input:file").change(function ()
{
// Get a reference to the fileList
var files = !!this.files ? this.files : [];
// If no files were selected, or no FileReader support, return
if ( !files.length || !window.FileReader ) return
浏览 0提问于2013-06-03得票数 4
回答已采纳
我试图为我的web应用程序创建一个功能，允许用户上传多个图片作为博客文章的一部分，然后在显示所有博客帖子列表的页面上查看它们。我想做的是，允许用户上传多个图像并将这些图像保存到localStorage。目前，我正在循环浏览用户上传的所有图像文件，然后向每个图像文件添加一个新的fileReader。为了将它们添加到localStorage中，我知道我必须使每个图像的键值不同(即img1=the第一图像、img2=the第二图像等等)。按照下面的代码，我将更改使用for循环上传的每个图像的键值，并将其设置为img${i}。
但是，当我试图在每个fileReader组件上添加一个"load“
浏览 6提问于2021-02-26得票数 1
回答已采纳
2回答
我正在开发角度应用程序，并试图解码图像与QR代码仅在客户端，并面临下一个错误。
我有下一个流程：
用户上传图像。
我从图像中解码qr码。
<input type="file" name="file" id="file" accept="image/*"(change)="qrCodeUploaded($event.target.files)"/>
我试过下一个图书馆：
qrCodeUploaded(files: FileList): void {
const f
浏览 0提问于2019-03-27得票数 1
回答已采纳
我正在使用react漂亮-dnd，并复制了教程中的代码来构建可拖放的列表。它起了作用，看起来是这样的：
下面是构建如下代码的代码：
然而，现在我正在尝试实现我自己的列表，它是一个播放列表，它使用输入将用户的计算机中的歌曲添加到列表中：
它部分工作，但我无法拖动列表项目到位(它总是回到相同的顺序)。下面是我修改的代码：
column-test.jsx
export default class ColumnTest extends React.Component {
constructor(props) {
super(props);
this.handleC
浏览 3提问于2019-12-23得票数 1
回答已采纳
2回答
在我正在开发的AngularJS应用程序中，我尝试异步处理多个上传的文件，以便为将它们添加到SuiteCRM实例的例程做好准备。总的来说，代码是没有bug的，但是我发现延迟调用是一个接一个地执行的，在所有的承诺得到解决之前，不会将结果传递给等待脚本。也许有人能帮我解决这个问题，怎样才能得到我想要的结果？
function fileReader(file) { // perform async operation
var deferred = $q.defer();
var reader = new FileReader();
reader.onload
浏览 0提问于2017-01-25得票数 0
回答已采纳
1回答
捕获第一视频帧
、、、、
我在堆栈溢出中发现了很多关于如何捕获第一个视频图像帧的文章，但我不认为我在代码上做错了什么以使它不能工作。所以如果有人能帮我，非常感谢！
HTML代码：
<ion-button expand="block" color="primary" (click)="onPickVideo()">
<ion-icon name="videocam" slot="start"></ion-icon>
<ion-label>Select video</ion-la
浏览 1提问于2020-01-13得票数 7
回答已采纳
我有一个页面，用户可以选择一个文件夹上传文件。在发送文件之前，我需要读取它们并检查数据。我的代码组织如下：
$( '#folder-select' ).on('change', getValidFileList);
var fileList = [];
var getValidFileList = function(event) {
//Get the selected files
files = $( this ).get(0).files;
for(var i=0; i<files.length; i++) {
浏览 2提问于2017-03-19得票数 6
回答已采纳
1回答
我有一个这样的FileList：
FileList {0: File, 1: File, 2: File, File…}
在刷新页面之后，我需要记住这些文件。我怎么才能把它们保存到饼干里呢？(或者有没有更好的方法？)现在，我正在像这样做$.cookie("result", files); files = $.cookie("result");，但是这会使我得到无法解析的对象FileList。将files转换为JSON也不起作用。
有任何想法吗?我如何保存FileList，以便在页面刷新后循环它？
编辑:也许我应该注意到，我从用户输入中得到了FileList。“选
浏览 3提问于2014-12-09得票数 0
回答已采纳
我刚接触过Reactjs，还在努力学习反应。关于如何在一个onChange事件中调用两个函数，我遇到了一些问题，我尝试了很多，但不知道如何实现。你能帮帮我吗。谢谢
函数1
handleChange = ({ fileList }) => this.setState({ fileList });
函数2
handleUpload = e => {
const reader = new FileReader();
const storeUser = JSON.parse(localStorage.getItem('user'));
reader.
浏览 0提问于2018-11-30得票数 0
2回答
我已经做了一个文件上传与文件预览使用html5+file阅读器，它的工作很好，除了旧的文件，用户选择从输入文件字段销毁，如果用户选择在一个新的单一浏览点击。
这是js小提琴
html
<p> UPLOAD </p>
<input type="file" multiple="yes" name="photo[]" id="photos">
<div id="preview"></div>
js
$("#photos").change(fun
浏览 7提问于2015-12-31得票数 3
我正在尝试从用户选择或拖放的硬盘中读取JSON文件。我有点不确定它应该如何工作，我想我对FileReader.readAsText是异步的这一事实有一个问题。总之，我做了一个drop zone组件，它工作得很好，用户也可以选择一个文件。以下是我的代码的相关部分： const DropZone = () => {
const [files, setFiles] = useState([]);
const [parsedFile, setParsedFile] = useState(null);
const onDrop = async (e) => {
e.p
浏览 13提问于2019-10-12得票数 2
回答已采纳
1回答
考虑以下代码
function readSingleFile(evt) {
//Retrieve the first (and only!) File from the FileList object
var myFile = evt.target.files[0];
var reader = new FileReader();
reader.readAsText(myFile);
var myString = reader.toString();
alert(myString); // print - "[object FileRea
浏览 0提问于2014-02-23得票数 8
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
