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

项目总结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;
    }
}