项目中很多时候都会用到上传文件到服务器,因此在这里实现一下
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);
}
}