SpringMVC + AngularJs + FastDFS实现文件上传

SpringMVC + AngularJs + FastDFS实现文件上传

文件上传页面三要素:

1、  form表单提交方式一定是post

2、  form表单的enctype一定是multipart/form-data

3、  form表单中一定要有一个input的type是 file

      文件上传一定要有的jar

      Commons-io和commons-fileupload

Springmvc文件上传:

1、  springmvc.xml中一定要有 多媒体解析器

2、  后台Controller中的方法中形参使用MultipartFile类型接收文件,参数的名称一定要和页面上的参数名称保持一致

HTML代码
 <div class="modal-body">

               <table class="table table-bordered table-striped">
                   <tr>
                       <td>颜色</td>
                       <td><input class="form-control" ng-model="image.color" placeholder="颜色"></td>
                   </tr>
                   <tr>
                       <td>商品图片</td>
                       <td>
                           <table>
                               <tr>
                                   <td>
                                       <input type="file" id="file"/>
                                       <button ng-click="uploadFile()" class="btn btn-primary" type="button">
                                           上传
                                       </button>
                                   </td>
                                   <td>
                                       <img src="{{image.url}}" width="200px" height="200px">
                                   </td>
                               </tr>
                           </table>
                       </td>
                   </tr>
               </table>

           </div>
           <div class="modal-footer">
               <button class="btn btn-success" data-dismiss="modal" ng-click="addItemImage()" aria-hidden="true">保存
               </button>
               <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
           </div>
AngularJs-controller代码
$scope.image = {}
// 图片上传
$scope.uploadFile = function () {
   uploadService.upload().success(function (response) {
       if (response.success) {
           $scope.image.url = response.message; // 后台返回上传成功后的图片URL
       } else {
           alert(response.message);
       }
   })
}
AngularJs-service代码
           // angularJS的文件上传
       this.upload=function(){
          // html5的对象
           var formData = new FormData();
           formData.append("file",file.files[0]); //file.files[0] js的取值方式  取到页面的第一个file
           return $http({
               method:'post',
               url:'../upload/uploadFile',
               data:formData,
               headers: {'Content-Type':undefined},  //enctype类型一定是 multipart/form-data
               transformRequest: angular.identity  //序列化上传的文件
           });
  }
后端Controller代码
// 文件上传
@RestController
@RequestMapping("/upload")
public class UploadController {

   @Value("${uploadServer}")
   private String uploadServer;

   @RequestMapping("/uploadFile")
   public Result uploadFile(MultipartFile file) {
       try {
           FastDFSClient fastDFSClient = new FastDFSClient("classpath:config/fdfs_client.conf");
         
           String fileName = file.getOriginalFilename(); // 文件名
           String extName = fileName.substring(fileName.lastIndexOf(".") + 1); // 后缀名
           String url = fastDFSClient.uploadFile(file.getBytes(), extName); // 获取上传服务器后图片的URL地址
           return new Result(true, uploadServer + url);
       } catch (Exception e) {
           e.printStackTrace();
           return new Result(false, "上传失败!");
       }
   }
}
配置文件
uploadServer=http://192.168.25.133/
tracker_server=192.168.25.133:22122
<!--上传文件配置-->
<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>

发表评论