angular上传文件到服务器

项目中很多时候都会用到上传文件到服务器,因此在这里实现一下
1.给按钮绑定事件

  

2.创建基础成层

//定义模块
var app = angular.module("pyg", []);

3.创建controller层
3.1创建基础baseController

先空着就行

3.2创建控制controller

//控制层 
app.controller('goodsController' ,function($scope,$controller, uploadService){
	$controller('baseController',{$scope:$scope});//继承
   scope.image = {url:'', color:''};
   $scope.uploadFile = function () {
       uploadService.uploadFile().success(function (res) {
           if(res.success){
               $scope.image.url = res.message;
           } else {
                alert(res.message);
           }
       });
   }
}

4.创建uploadService.js

//服务层
app.service('uploadService',function($http){
          
   this.uploadFile = function () {
      //FormData 就是 XMLHttpRequest Level 2 新增的一个对象,利用它来提交表单、模拟表单提交,当然最大的优势就是可以上传二进制文件
      //	FormData 就是 XMLHttpRequest Level 2 新增的一个对象,利用它来提交表单、模拟表单提交,最大的优势就是可以上传二进制文件
      //	设置’Content-Type’:undefined,浏览器会把Content-Type 设置为 multipart/form-data,并填充当前绑定的数据,如果手动设置为:’Content-Type’:multipart/form-data,后台会抛出异常:the current request boundary parameter is null。 
	//	file.files[0]是document.getElementById('file').files[0]的简写

      var formData = new FormData();
        formData.append('file', file.files[0]);//file.files[0]是document.getElementById('file').files[0]的简写
      return $http({
         method:'post',
         url:'../../file/upload',
         data:formData,//向后台发送的数据
         headers:{'Content-type':undefined},
         transformRequest: angular.identity
      })
    }
});

5.回显数据


6.修改spring-mvc.xml配置文件




   
   
   


5.创建后台UploadController.java

@RestController
@RequestMapping("/file")
public class UploadController {
   @Value("${FILE_SERVER_URL}")
   private String FILE_SERVER_URL;//文件服务器地址

   @RequestMapping("/upload")
   public Result upload( MultipartFile file){
      //1、取文件的扩展名
      String originalFilename = file.getOriginalFilename();
      String extName = originalFilename.substring(originalFilename.lastIndexOf(".")
            + 1);
      try {
         //2、创建一个 FastDFS 的客户端
         FastDFSClient fastDFSClient
               = new FastDFSClient("classpath:config/fdfs_client.conf");
         //3、执行上传处理
         String path = fastDFSClient.uploadFile(file.getBytes(), extName);
         //4、拼接返回的 url 和 ip 地址,拼装成完整的 url
         String url = FILE_SERVER_URL + path;
         return new Result(true,url);
      } catch (Exception e) {
         e.printStackTrace();
         return new Result(false, "上传失败");
      }
   }

}

6.提供application.properties配置文件

FILE_SERVER_URL=http://192.168.25.133/

7.提供fdfs_client.conf配置文件

tracker_server=192.168.25.133:22122

提供工具类FastDFSClient代码如下:

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);
	}
	
	/**
	 * 上传文件方法
	 * 

Title: uploadFile

*

Description:

* @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); } /** * 上传文件方法 *

Title: uploadFile

*

Description:

* @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); } }

你可能感兴趣的:(angular上传文件到服务器)