Angular中上传图片到分布式文件服务器FastDFS上
时间:2019-11-18
本文章向大家介绍Angular中上传图片到分布式文件服务器FastDFS上,主要包括Angular中上传图片到分布式文件服务器FastDFS上使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
使用步骤
1、上传下载需要的依赖
2、springmvc中配置多媒体解析器并加载
<!-- 配置多媒体解析器 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <!--文件格式--> <property name="defaultEncoding" value="UTF-8"></property> <!-- 设定文件上传的最大值5MB,5*1024*1024 --> <property name="maxUploadSize" value="5242880"></property> </bean> //扫描application.properties文件 <context:property-placeholder location="classpath:config/application.properties" />
application.properties配置文件
//application.properties文件中的数据 FILE_SERVER_URL=http://192.168.200.128/
3、前端页面中的文件上传的规范
this.uploadFile = function(){ // 向后台传递数据: var formData = new FormData(); // 向formData中添加数据: formData.append("file",file.files[0]); return $http({ method:'post', url:'../upload/uploadFile.do', data:formData, //添加头信息,浏览器会帮我们吧Content-Type设置为multipart/form-data,. headers:{'Content-Type':undefined} ,// Content-Type : text/html text/plain transformRequest: angular.identity }); }
4、后台接口代码
@RestController @RequestMapping("/upload") public class UploadController { @Value("${FILE_SERVER_URL}") //从spring容器中的到fastDFS的服务地址 private String FILE_SERVER_URL; @RequestMapping("/uploadFile") public Result uploadFile(MultipartFile file){ try { String filename = file.getOriginalFilename(); //获取文件名的后缀 String extName = filename.substring(filename.indexOf(".1") + 1); //编译时期异常,用try catch捕获 FastDFSClient fastDFSClient = new FastDFSClient("classpath:fastDFS/fdfs_client.conf"); //服务器中的存放路径地址 String s = fastDFSClient.uploadFile(file.getBytes(), extName); //将虚拟机的ip地址,和文件服务器端返回的存储地址返回到前端 String url = FILE_SERVER_URL+s; return new Result(true,url); } catch (Exception e) { e.printStackTrace(); return new Result(false,"上传失败"); } } }
5、上面我将FastDFS封装成了一个工具类
public class FastDFSClient { private TrackerClient trackerClient = null; private TrackerServer trackerServer = null; private StorageServer storageServer = null; private StorageClient1 storageClient = null; public FastDFSClient(String conf) throws Exception { if (conf.contains("classpath:")) { conf = conf.replace("classpath:", this.getClass().getResource("/").getPath()); } ClientGlobal.init(conf); trackerClient = new TrackerClient(); trackerServer = trackerClient.getConnection(); storageServer = null; storageClient = new StorageClient1(trackerServer, storageServer); } /** * 上传文件方法 * <p>Title: uploadFile</p> * <p>Description: </p> * @param fileName 文件全路径 * @param extName 文件扩展名,不包含(.) * @param metas 文件扩展信息 * @return * @throws Exception */ public String uploadFile(String fileName, String extName, NameValuePair[] metas) throws Exception { String result = storageClient.upload_file1(fileName, extName, metas); return result; } public String uploadFile(String fileName) throws Exception { return uploadFile(fileName, null, null); } public String uploadFile(String fileName, String extName) throws Exception { return uploadFile(fileName, extName, null); } /** * 上传文件方法 * <p>Title: uploadFile</p> * <p>Description: </p> * @param fileContent 文件的内容,字节数组 * @param extName 文件扩展名 * @param metas 文件扩展信息 * @return * @throws Exception */ public String uploadFile(byte[] fileContent, String extName, NameValuePair[] metas) throws Exception { String result = storageClient.upload_file1(fileContent, extName, metas); return result; } public String uploadFile(byte[] fileContent) throws Exception { return uploadFile(fileContent, null, null); } public String uploadFile(byte[] fileContent, String extName) throws Exception { return uploadFile(fileContent, extName, null); }
6、后台将整合好的url传给前端,前端通过
$scope.uploadFile = function(){ // 调用uploadService的方法完成文件的上传 uploadService.uploadFile().success(function(response){ if(response.success){ // 成功的话获得url,不弹窗口 $scope.image_entity.url = response.message; }else{ //失败的话弹窗 alert(response.message); } }); }
去展示我们上传的照片。
原文地址:https://www.cnblogs.com/guanyuehao0107/p/11883024.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- elk基于jolokia监控springboot应用jvm方案
- elasticsearch集群更换节点操作
- 对storm1.2.3并行度的理解
- RabbitMQ集群搭建过程
- java中的reference(一): GC与4种基本的Reference(强软弱虚)
- java中的reference(三): FinalReference和Finalizer的源码分析
- 【ceph】性能测试工具cosbench(1)
- linux命令tree的使用
- 腾讯云V3签名方法之iOS
- Go语言学习之 panic 和 recover
- Go语言学习之函数
- 【Spark Operator】webhook的分析
- 图解人脸识别算法facenet系列(一)
- Go 语言学习之 struct
- Go 语言学习之map