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

 

 去展示我们上传的照片。