easyui上传图片到阿里云OSS并且显示出来(☆)

html代码

<form  id="ff" method="post" action="${path}/ebayKanDeng/draft/<#if ebayItem??>update<#else>add</#if>">
       
  <input type="hidden" name="id" value="${ebayItem.id}"  enctype="multipart/form-data">
           
	<div class="fr">
		<label>典型图片</label>
		<input class="easyui-filebox"  style="width:380px;height:40px;"  multiple name="img" id="image"/>     
	</div>
</form>
    
<div style="text-align:left;padding:5px">
	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="submitForm()">确认添加</a>
	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="clearForm()">清空</a>
</div>

js代码

  /* 
     下面上传图片的代码
    */
    
    function submitForm(){
    	
        $("#ff").form('submit', {
            type:"post",  //提交方式
            data:$('#ff').serialize(),
            dataType: 'json',
            url:'${path}/ebayKanDeng/draft/addImgToOos', //请求url
            success:function(map)
            {
            
                map = eval( '('+map+')' );      //form形式提交，就收后台数据需要再转换
                //alert("map.result.msg="+map.result.msg);
                if(map.result.msg == 1)
                {
                    $.messager.alert("操作提示","保存信息成功");
                }
                else{
                    $.messager.alert("操作提示","保存信息失败");
                }

            }
        });
    }

    function clearForm(){
        $('#ff').form('clear');
    }

controller代码

   /**
	     * 上传到阿里云oos
	     * @param ebayItem
	     * @param img
	     * @param request
	     * @return
	     */
	    @RequestMapping(method=RequestMethod.POST,value="addImgToOos")
	    @ResponseBody
	    public Map<String,Object> addImgToOos(EbayItem ebayItem, @RequestParam(value="img",required = false)
	    MultipartFile[] img,HttpServletRequest request){
	    
	    if(ebayItem.getId()==null) {
	    	throw new MyBusinessException("缺少商品id");
	    }
	   
	    Map<String ,Object> map=new LinkedHashMap<>();
	  
	    try {
              
	        //将数据保存
	        ebayItemSerivice.saveImgToOos(ebayItem,img);
	        map.put("msg","1");
	        return map;
	    } catch (Exception e){
	        e.printStackTrace();
	        map.put("msg",e.getMessage());
	    }
	    return map;
	}

service代码

 void saveImgToOos(EbayItem ebayItem,MultipartFile[] files);

service实现代码

@Override
	public void saveImgToOos(EbayItem ebayItem,MultipartFile[] files) {
		// TODO Auto-generated method stub
		//多图片路径
		List<MultipartFile> muls=new ArrayList();
		for (MultipartFile s : files) {
			muls.add(s);
		}
		String imageUrlList = ossClientUtil.checkList(muls); 
	    ebayItem.setImgPath(imageUrlList);
	    ebayItemDao.updateByPrimaryKeySelective(ebayItem);
	    log.info(imageUrlList);
	    if(StringUtil.isEmpty(ebayItem.getImgPath())) {
	    	throw new MyBusinessException("添加图片失败");
	    }
	    log.info(imageUrlList);
		
	}

工具类

package com.iautorun.lepower.service.utils;

import com.aliyun.oss.OSSClient;
import com.aliyun.oss.model.ObjectMetadata;
import com.aliyun.oss.model.PutObjectResult;
import org.apache.commons.lang.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;
import java.io.InputStream;
import java.net.URL;
import java.util.Date;
import java.util.List;
import java.util.Random;
@Component
public class OSSClientUtil {

    protected static final Logger log = LoggerFactory.getLogger(OSSClientUtil.class);

    @Value("${Oos.endpoint}")
    private String endpoint;
    @Value("${Oos.accessKeyId}")
    private String accessKeyId;
    @Value("${Oos.accessKeySecret}")
    private String accessKeySecret;
    @Value("${Oos.bucketName}")
    private String bucketName;

    //文件存储目录
    private String filedir = "APP/";

    /**
     *
     * 上传图片
     * @param file
     * @return
     */
    public String uploadImg2Oss(MultipartFile file) {
        if (file.getSize() > 1024 * 1024 *20) {
            return "图片太大";//RestResultGenerator.createErrorResult(ResponseEnum.PHOTO_TOO_MAX);
        }
        String originalFilename = file.getOriginalFilename();
        String substring = originalFilename.substring(originalFilename.lastIndexOf(".")).toLowerCase();
        Random random = new Random();
        String name = random.nextInt(10000) + System.currentTimeMillis() + substring;
        try {
            InputStream inputStream = file.getInputStream();
            this.uploadFile2OSS(inputStream, name);
            return name;//RestResultGenerator.createSuccessResult(name);
        } catch (Exception e) {
            return "上传失败";//RestResultGenerator.createErrorResult(ResponseEnum.PHOTO_UPLOAD);
        }
    }

    /**
     * 上传图片获取fileUrl
     * @param instream
     * @param fileName
     * @return
     */
    private String uploadFile2OSS(InputStream instream, String fileName) {
        String ret = "";
        try {
            //创建上传Object的Metadata
            ObjectMetadata objectMetadata = new ObjectMetadata();
            objectMetadata.setContentLength(instream.available());
            objectMetadata.setCacheControl("no-cache");
            objectMetadata.setHeader("Pragma", "no-cache");
            objectMetadata.setContentType(getcontentType(fileName.substring(fileName.lastIndexOf("."))));
            objectMetadata.setContentDisposition("inline;filename=" + fileName);
            //上传文件

         OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
         PutObjectResult putResult = ossClient.putObject(bucketName, filedir + fileName, instream, objectMetadata);
            ret = putResult.getETag();
        } catch (IOException e) {
            log.error(e.getMessage(), e);
        } finally {
            try {
                if (instream != null) {
                    instream.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return ret;
    }

    public static String getcontentType(String FilenameExtension) {
        if (FilenameExtension.equalsIgnoreCase(".bmp")) {
            return "image/bmp";
            }
            if (FilenameExtension.equalsIgnoreCase(".gif")) {
                return "image/gif";
            }
            if (FilenameExtension.equalsIgnoreCase(".jpeg") ||
                    FilenameExtension.equalsIgnoreCase(".jpg") ||
                    FilenameExtension.equalsIgnoreCase(".png")) {
                return "image/jpg";
            }
            if (FilenameExtension.equalsIgnoreCase(".html")) {
                return "text/html";
            }
            if (FilenameExtension.equalsIgnoreCase(".txt")) {
                return "text/plain";
            }
            if (FilenameExtension.equalsIgnoreCase(".vsd")) {
                return "application/vnd.visio";
            }
            if (FilenameExtension.equalsIgnoreCase(".pptx") ||
                    FilenameExtension.equalsIgnoreCase(".ppt")) {
                return "application/vnd.ms-powerpoint";
            }
            if (FilenameExtension.equalsIgnoreCase(".docx") ||
                    FilenameExtension.equalsIgnoreCase(".doc")) {
                return "application/msword";
            }
            if (FilenameExtension.equalsIgnoreCase(".xml")) {
                return "text/xml";
            }
            return "image/jpg";
        }

    /**
     * 获取图片路径
      * @param fileUrl
     * @return
     */
    public String getImgUrl(String fileUrl) {
        if (!StringUtils.isEmpty(fileUrl)) {
                String[] split = fileUrl.split("/");
                String url =  this.getUrl(this.filedir + split[split.length - 1]);
//                log.info(url);
//                String[] spilt1 = url.split("\\?");
//                return spilt1[0];
                int begin=url.indexOf("?");
                if(begin==-1) {
                	 return url;
                }else {
                	url=url.substring(0, begin);
                	return url;
                }
            
        }
        return null;
    }

    /**
     * 获得url链接
     *
     * @param key
     * @return
     */
    public String getUrl(String key) {
        // 设置URL过期时间为10年  3600l* 1000*24*365*10
        Date expiration = new Date(new Date().getTime() + 3600l * 1000 * 24 * 365 * 10);
        // 生成URL
        OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
        URL url = ossClient.generatePresignedUrl(bucketName, key, expiration);
        if (url != null) {
            return url.toString();
        }
        return null;
    }


    /**
     * 多图片上传
     * @param fileList
     * @return
     */
    public String checkList(List<MultipartFile> fileList) {
        String  fileUrl = "";
        String  str = "";
        String  photoUrl = "";
        for(int i = 0;i< fileList.size();i++){
            fileUrl = uploadImg2Oss(fileList.get(i));
            str = getImgUrl(fileUrl);
            if(i == 0){
                photoUrl = str;
            }else {
                photoUrl += "," + str;
            }
        }
        return photoUrl.trim();
    }

    /**
     * 单个图片上传
     * @param file
     * @return
     */
    public String checkImage(MultipartFile file){
        String fileUrl = uploadImg2Oss(file);
        String str = getImgUrl(fileUrl);
        return str.trim();
    }
}

在这里插入图片描述

easyui上传图片到阿里云OSS并且显示出来(☆)

悦读