Fastdfs分布式文件系统（图片上传）代码共享_本地文件上传到分布式文件系统代码

用户321207420452
19 阅读1分钟

<context:property-placeholder location="classpath:config/*.properties" />

4.完成上传操作的后端代码文件  UploadController.java    并且导入文件上传的工具包  完成上传操作

resources.properties

IMAGE_SERVER_URL= http://192.168.25.133/

PygResult：这是我封装的一个布尔类，好用来返回是否成功在页面显示，可用可不用

//注入常量配置

@Value ( "${IMAGE_SERVER_URL}" )

private String IMAGE_SERVER_URL ;

@RequestMapping ( "/upload" )

public PygResult uploadPic(MultipartFile file ){

             

             

              try {

                     //获取文件名称

                    String originalFilename

file .getOriginalFilename();

                     //截取文件扩展名

                    String extName

originalFilename .substring( originalFilename .lastIndexOf( "." )+1);

                    

                     //创建工具类对象 加载client.conf文件里的fastDfs服务器地址

                     FastDFSClient fdfs

new FastDFSClient ( "classpath:config/client.conf" );

                     //上传文件

                     // gif , bmp , jpg

                     //返回文件上传成功地址:group1/M00/00/02/wKhCQ1qvKG2AZqibAA1rIuRd3Es806. jpg

                    String url

fdfs .uploadFile( file .getBytes(), extName );

                    

                     //组合图片上传成功绝对地址

                    //  url = "fastDfs图片服务器IP地址"+url;  这样写会吧IP暴露出来，我们可以创建一个resources.properties文件，里面放上我们的IP 再使用**@Value注入即可  （注意如写了这个文件在springMVC.xml中要配置一个扫描器扫描这个文件）**

                     url

IMAGE_SERVER_URL + url ;

                    System. out .println( "地址：=============" + url );

                     //上传成功

                     return new PygResult( true , url );

                    

                    

             } catch (Exception e ) {

                     // TODO Auto-generated catch block

                     e .printStackTrace();

                     //上传失败

                     return new PygResult( false , "上传失败" );

             }

             

             

       }

前端代码实现：

有上传页面如下   当点击新建窗口是跳转到文件上传标签  在里面进行上传    上传后返回图片地址在页面回显

       <div class="modal fade" id="uploadModal" tabindex="-1" role="dialog"

             aria-labelledby="myModalLabel" aria-hidden="true">

             

                    

                           

                                 <button type="button" class="close"  data-dismiss="modal"

                                        aria-hidden="true">×

                                 

上传商品图片

                           

                           

                                 

                                        

                                               

                                               

                                        

                                        

                                               

                                               

                                        

                                 

颜色<input class="form-control"  placeholder="颜色"

                                                      ng-model="imageEntity.color">

商品图片

                                                     

                                                            

                                                                   

                                                                   

                                                            

                                                     

<input  type="file" id="file" />

                                                                          <button class="btn btn-primary" type="button"

                                                                                 ng-click="uploadFile()">上传

 <img  src="{{imageEntity.url}}" width="200px"

height="200px">

                                               

                           

                           

                                 <button class="btn btn-success"  ng-click="add_image_entity()"

                                        data-dismiss="modal"  aria-hidden="true">保存

                                 <button class="btn btn-default"  data-dismiss="modal"

                                        aria-hidden="true">关闭

                           

                    

             

       

1.创建uploadContrlller.js  uploadService.js文件  并在页面引用  （因为我们使用的时 angularjs插件，具体使用看angularjs的配置介绍使用）

在uploadContrlller.js 中完成上传方法并调用uoloapservice.js方法，

app.controller('goodsController' ,function(scope,scope,controller,uploadService){ 

controller('baseController',{scope:$scope});//继承

// 文件上传

$scope.uploadFile = function() {

// 调用服务层

uploadService.uploadFile().success(function(data) {

// 是否上传成功

if (data.success) {

// 把图片地址获取  返回图片地址  在页面调用即可回显

$scope.imageEntity.url = data.message;

} else {

// 上传失败

alert("上传失败");

}

});

};

=========================================华丽的分割线==============================================

    // 定义初始化对象

    $scope.entity = {

        goods : {},

        goodsDesc : {

            itemImages : [],

            specificationItems : []

        }

    };

    // 保存图片操作

    // 保存图片:只需要利用数据双向绑定原理,获取到图片上传数据,把数据绑定到需要保存entity实体即可

    $scope.add_image_entity = function() {

        // 把图片对象数据添加到商品描述对象

        scope.entity.goodsDesc.itemImages.push(scope.entity.goodsDesc.itemImages.push(scope.imageEntity);

    }

    // 删除图片对象

    $scope.removeImageEntity = function(index) {

        $scope.entity.goodsDesc.itemImages.splice(index, 1);

    }

img img

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

了解详情》docs.qq.com/doc/DSlVlZExWQ0FRSE9H

avatar
文章
阅读
粉丝