ng-file-upload使用注意事项

最新推荐文章于 2024-11-14 12:29:42 发布
最新推荐文章于 2024-11-14 12:29:42 发布
阅读量4.9k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： angularjs ng-file-upload 文件上传
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Fabuler/article/details/50409018
本文探讨了在使用ng-file-upload组件进行文件上传时遇到的常见问题，包括事件绑定方式、依赖项缺失以及DOM结构改变等。文章深入分析了这些问题的根本原因，并提供了解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在使用ng-file-upload进行文件上传的时候，遇到很多不报错的奇怪问题，导致这些问题的原因：

1.使用了onclick＝“”，这样的事件绑定方法。

2.没有安装flash（不支持html5浏览器）

3.使用了ng－if指令，其实就是改变了html的结构，若非要用ng－if实现dom元素隐藏，可以使用ng－show替换。

总结根本原因：就是html不能有错误，不能随便改变html结构，是否有运行环境。

Fabuler
关注
angular文件上传
Rulelur的博客
04-28 1296
来源：https://blog.angular-university.io/angular-file-upload/ 目录 简单文件上传 简单文件上传 代码：https://gitee.com/dragonhot/angular-code/tree/dev/src/app/modules/file-upload/file-upload1（http://localhost:4200/upload/1）
实现文件上传，以及表单提交成功的回调函数
08-10
实现文件上传，以及表单提交成功的回调函数
ng-file-upload实现图片上传
申谊的博客
07-11 2719
通过ng-file-upload这个轻量级、跨浏览器的angular上传文件指令实现图片上传及删除；
Angular4集成ng2-file-upload
weixin_30675247的博客
07-29 467
在Github上找到了一个支持Angular4好用的文件上传组件ng2-file-upload，这里简单介绍一下这个库的集成使用方案。 本文基于该组件的1.2.1版。 1. 安装 安装非常简单，只要在项目根路径下运行如下npm命令即可: npm install ng2-file-upload --save 2. 使用说明 官方的文档写的非常简单，几乎看不出什么来...
FileUploadModule ng2-file-upload 上传
kangmingyaner的博客
02-21 387
web 文件上传方法分享，只用了需求需要的功能，其他的需求请查看参考文档。 1. 安装 安装非常简单，只要在项目根路径下运行如下npm命令即可: npm install ng2-file-upload --save 2. 使用说明 官方的文档写的非常简单，几乎看不出什么来，这里结合实际的使用调试，说明一下基本的配置和使用方案。 2.1. 集成到Module中 在需要使用的Modul...
ng2-file-upload 项目推荐
gitblog_00599的博客
11-14 884
ng2-file-upload 项目推荐 1. 项目基础介绍和主要编程语言 ng2-file-upload 是一个易于使用的 Angular 组件库，专门用于文件上传功能。该项目由 valor-software 团队开发并维护，主要使用 TypeScript 作为编程语言。TypeScript 是 JavaScript 的超集，提供了静态类型检查和更强大的面向对象编程特性，非常适合用于构建大型 A...
AngularJS第三方大文件上传插件ng-file-upload介绍
angular-upload-shim.min.js是ng-file-upload插件的一个组成部分，它提供了一个针对旧版浏览器的兼容性解决方案，确保在不支持File API的旧浏览器上也能使用文件上传功能。通过该脚本，开发者可以放心地使用ng-file-...
ng-form插件上传文件怎么配置
最新发布
08-01
由于引用[1]中提到了ng2-file-upload，引用[3]提到了ng-flow，我们可以假设用户可能想使用这些插件之一来实现文件上传，并且可能误将插件名称为“ng-form”。因此，我们将重点放在如何使用ng2-file-upload（因为引用...
nginx 的nginx-upload-module
03-21
首先，我应该回顾用户提供的引用内容，看看是否有相关的步骤或注意事项。引用[1]提到了nginx-upload-module的项目地址，用户需要从这里获取模块源码。引用[2]和[3]涉及到fastdfs-nginx-module的安装和Nginx的配置，...
AngularJS实现图片上传和预览功能的方法分析
10-19
### 注意事项 使用angular-file-upload模块时，需要注意以下几点： - 在使用FileReader读取文件并更新作用域时，必须调用`$scope.$apply`，因为FileReader的事件处理函数是在AngularJS框架外部执行的，不会自动...
//上传文件 @PostMapping("/upfile") public ResponseEntity<?> uploadFile(@RequestParam("file") MultipartFile[] file){ fileUploadService.uploadFileToNas(file); return ResponseEntity.ok("File uploaded"); } @Service public class FileUploadService { private static final Logger log = LoggerFactory.getLogger(FileUploadService.class); private final SimpMessagingTemplate messagingTemplate; private final NasFileInfoMapper fileInfoMapper; private final NasDownloadLogMapper nasDownloadLogMapper; private static final String HOSTNAME = "10.32.5.80"; // NAS服务器地址 private static final String SHARE_NAME = "AnyshareBAK"; // 共享文件夹名称 private static final String USERNAME = "anyshare"; // 用户名 private static final String PASSWORD = "anybakup$*5.46"; private static final String NAS_UPLOAD_PATH = "/upload"; // NAS 目标路径，可根据需要修改 private static final String BASE_PATH = "/data/uploads/temp"; // 本地临时目录 private final SMBClient client; private Connection connection; private static Session session; public FileUploadService(SimpMessagingTemplate messagingTemplate, NasFileInfoMapper fileInfoMapper, NasDownloadLogMapper nasDownloadLogMapper) { this.messagingTemplate = messagingTemplate; this.fileInfoMapper = fileInfoMapper; this.nasDownloadLogMapper = nasDownloadLogMapper; this.client = new SMBClient(SmbConfig.builder() .withMultiProtocolNegotiate(true) .build()); } public void init() throws IOException { if (connection == null || !connection.isConnected()) { connection = client.connect(HOSTNAME); session = connection.authenticate(new AuthenticationContext(USERNAME, PASSWORD.toCharArray(), "domain")); } } private void uploadToNas(InputStream inputStream, String nasPath) throws IOException { init(); try (DiskShare share = (DiskShare) session.connectShare(SHARE_NAME)) { // 分离目录路径和文件名 int lastSlash = nasPath.lastIndexOf('/'); String directoryPath = (lastSlash > 0) ? nasPath.substring(0, lastSlash) : "/"; String fileName = (lastSlash > 0) ? nasPath.substring(lastSlash + 1) : nasPath; // 创建目录结构（如果不存在） createDirectoryIfNotExists(share, directoryPath); // 创建文件并写入数据 try (com.hierynomus.smbj.share.File nasFile = share.openFile( nasPath, EnumSet.of(AccessMask.GENERIC_ALL), null, SMB2ShareAccess.ALL, SMB2CreateDisposition.FILE_OVERWRITE_IF, // 存在则覆盖 null )) { try (OutputStream nasOutputStream = nasFile.getOutputStream()) { byte[] buffer = new byte[8192]; int bytesRead; while ((bytesRead = inputStream.read(buffer)) != -1) { nasOutputStream.write(buffer, 0, bytesRead); } nasOutputStream.flush(); } } } catch (Exception e) { log.error("上传文件到NAS失败: {}", nasPath, e); throw new IOException("NAS上传失败", e); } } private void createDirectoryIfNotExists(DiskShare share, String path) { String[] folders = path.split("/"); String currentPath = ""; for (String folder : folders) { if (folder.isEmpty()) continue; currentPath += "/" + folder; if (!share.folderExists(currentPath)) { share.mkdir(currentPath); } } } public void uploadFileToNas(MultipartFile[] files) { for (MultipartFile file : files) { if (file.isEmpty()) continue; String originalFilename = file.getOriginalFilename(); String nasPath = NAS_UPLOAD_PATH + "/" + originalFilename; try { // 生成文件哈希（可选） String fileHash = generateFileHash(file); // 直接上传到NAS uploadToNas(file.getInputStream(), nasPath); // 保存文件信息到数据库 NasFileInfo info = new NasFileInfo(); info.setFileHash(fileHash); info.setFileName(originalFilename); info.setFileSize(file.getSize()); info.setUploadTime(LocalDateTime.now()); info.setUsername(SecurityUtils.getUsername()); info.setDeptId(SecurityUtils.getDeptId()); info.setNasPath(nasPath); fileInfoMapper.insert(info); } catch (IOException e) { log.error("文件上传失败: {}", originalFilename, e); // 可以根据需要添加重试机制或更详细的错误处理 } } } // 生成文件哈希（MD5示例） private String generateFileHash(MultipartFile file) throws IOException { try (InputStream is = file.getInputStream()) { return DigestUtils.md5DigestAsHex(is); } catch (Exception e) { log.warn("MD5算法不可用，使用随机哈希替代"); return UUID.randomUUID().toString(); }}} 前端会调用uploadFile触发文件上传（存在一次多个文件），service层中的代码为uploadFile的具体实现，当前使用SMBClient 的方式无法连接nas服务器以至于无法完成后续文件传输的过程，所以我希望换一种方式，使用jcifs-ng库完成以上功能，请在我的原代码上做出修改
07-23
### 注意事项 1. **连接性能**：jcifs-ng的上下文（`CIFSContext`）和认证信息可以重用，避免频繁创建和销毁。 2. **错误处理**：在实际应用中，需要更完善的错误处理，例如网络中断、认证失败等。 3. **路径处理**...
Angular4集成ng2-file-upload的上传组件
11-27
在Github上找到了一个支持Angular4好用的文件上传组件ng2-file-upload，这里简单介绍一下这个库的集成使用方案。 本文基于该组件的1.2.1版。 1. 安装 安装非常简单，只要在项目根路径下运行如下npm命令即可: npm install ng2-file-upload --save 2. 使用说明 官方的文档写的非常简单，几乎看不出什么来，这里结合实际的使用调试，说明一下基本的配置和使用方案。 2.1. 集成到Module中 在需要使用的Module中需要引入如下两个模块： … import { CommonModule } from '@angular/commo
angular2 ng2-file-upload上传示例代码
10-18
主要介绍了angular2 ng2-file-upload上传示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Angular4上传文件中ng2-file-upload 使用方法
Mr.Tang的博客
11-01 868
使用方法：第一步：安装 ng2-file-uploadnpm install ng2-file-upload --save第二步：在需要使用该插件的页面的对应module文件的imports中引入CommonModule 和 FileUploadModule@NgModule({imports:[...FileUploadModule...])第三步：在对应的...
Angular angular-file-upload 入坑记
热门推荐
不忘初心
11-14 2万+
我们写网站呢 上传功能几乎是一定会用到的，这是一个灰常使用的插件，而且操作简单，非常容易使用，老规矩还是放一下API，走运的是，这个插件的API并不需要翻墙也看得到哦~ https://github.com/nervgh/angular-file-upload 进入正题，我们如何安装，还是老样子安利波npmnpm install angular-file-upload我们如何在项目中使用它呢
angular-file-upload 在IE下使用的坑
weixin_34392843的博客
09-26 238
如果在控件配置里面设置了queueLimit属性为1,就是队列文件个数为1，并且在<input>标签设置里multiple属性。 在IE浏览器上传附件的时候，浏览器会报错“SCRIPT5007: 无法获取未定义或 null 引用的属性“replaceChild”。 解决办法：在设置queueLimit：1的时候，不要在<input>标签设置multiple。 转载于:h...
angularjs之ng-file-upload上传头像
沐吾
07-28 2885
图片上传分为单张上传，多张上传，拖拽上传，裁剪上传 头像上传，上传后会更改头像 ng-src="{{personal.avatar}}" ngf-resize="{width: 46, height: 46, quality: .8, type: 'image/*', ratio: '1:2', centerCrop: true, pattern='*', restoreExif: fa
angular js 上传插件 angular-file-upload 和 ng-file-upload 使用时注意事项
Sophiego的博客
05-17 7251
项目中碰到文件上传，
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值