项目总结21：input实现多图上传(FormData)(上传OSS并保存数据库)

备注：本案例，作为Demo，包含少量的项目业务逻辑，input多图上传的逻辑是完整的；

不废话直接上代码

1-前端标签

//属性：multiple; 表示input标签支持选择多图

//属性：accept="image/*"; 顾虑选择范围，只允许上传图片

//'${entity.id}' 是业务数据，和多图上传本身没有直接关联

<input type="file"  onchange="uploadAndSaveMaterialPic(this,'${entity.id}')"  multiple  accept="image/*" />

2-前端JavaScript

<script>

    //1-oss上传材料图片并保存到数据(基本逻辑：先将图片全部上传到OSS并返回图片URL列表，然后将图片URL列表保存到数据库)

    function uploadAndSaveMaterialPic(data,materialId) {

        var files = data.files;

        //1-封装formdata

        var formData = new FormData();

        for(var i=0; i<files.length; i++){

            formData.append("mulFiles", files[i]);//1-封装图片

        }

        formData.append("fileType", 1);//2-封装文件类型-1表示是图片

        //2-封装ajaxObject

        var ajaxObject ={};

        ajaxObject.success = function(result){

            //保存图片

            var ajaxObject = {};

            ajaxObject.url = "productmaterialfile/saveBatch";

            ajaxObject.data = {materialId: materialId,fileUrlList:result.data}

            ajaxObject.success = function(){

                //location.reload();

            }

            ajaxPost(ajaxObject);

        }

        //3-上传图片到OSS，并在success时，回调保存数据到数据的逻辑

        uploadMultiFileToOSS(ajaxObject,formData);

    }

    //2-上传多个文件导OSS

    function uploadMultiFileToOSS(ajaxObject,formData){

        debugger;

        var success = ajaxObject.success;

        $.ajax({

              url: "upload/multi/file",

              type: "post",

              data: formData,

              cache: false,

              processData: false,

              contentType: false,

              success:function(result){

                console.log(result.code+" "+ result.msg);

                if (result.code==200){

                     if(success){

                        console.log("file url -->"+result.data);

                         success(result);

                     }

                }else{

                    console.log(result.msg);

                }

              },

              error:function(e){

                  bootbox.alert("上传失败");

               }

              });

    }

</script>

3-后台Controller

//1-后台-上传图片到OSS

@RequestMapping(value = { "upload/multi/file" }, method = { RequestMethod.POST }, produces = { JSON_UTF8 })

@ResponseBody

public Object uploadMultiFile(

    @RequestParam (value="fileType",required=true)Integer fileType,

    @RequestParam(value="mulFiles",required=true) MultipartFile[] mulFiles,

    HttpServletRequest request

  ) throws Exception{

  if(mulFiles == null || mulFiles.length == 0){

    return ResponseMessageEnum.ERROR_NO_FILE.appendEmptyData();

  }

  try {

        //保存图片到OSS，并返回图片url列表，这里不具体展开

        List<String> filePathList = AliyunOSSUtil.uploadMultiFile(mulFiles, UplocadFilePathTypeEnum.getNameByKey(fileType));

        return ResponseMessageEnum.SUCCESS.appendObjectToString(filePathList);

  } catch (Exception e) {

    return ResponseMessageEnum.FILE_UPLOAD_ERROR.appendEmptyData();

  }

}

//2-后台-爆保存图片数据到数据库

@RequestMapping(value = "productmaterialfile/saveBatch", method = RequestMethod.POST, produces = { JSON_UTF8 })

@ResponseBody

public String saveBatch(@RequestBody ProductMaterialMultiFileReq productMaterialMultiFileReq) throws Exception {

    try {

      /**保存数据到数据库的逻辑shenglue*/

    } catch (Exception e) {

        logger.warn(e.toString(), e);

        return ResponseMessageEnum.SERVER_SQL_ERROR.toString();

    }

    return ResponseMessageEnum.SUCCESS.appendEmptyData();

}

//后台-请求参数接收实体类

public class ProductMaterialMultiFileReq {

      private Long materialId; // 素材id

    List<String> fileUrlList;

    public Long getMaterialId() {

        return materialId;

    }

    public void setMaterialId(Long materialId) {

        this.materialId = materialId;

    }

    public List<String> getFileUrlList() {

        return fileUrlList;

    }

    public void setFileUrlList(List<String> fileUrlList) {

        this.fileUrlList = fileUrlList;

    }

}

项目总结21：项目总结21：input实现多图上传(FormData)(上传OSS并保存数据库)的相关教程结束。