基于springboot的本地和oss图片上传

最新推荐文章于 2024-07-11 21:12:48 发布

csdnMoney

最新推荐文章于 2024-07-11 21:12:48 发布

阅读量626

点赞数 1

分类专栏： java 文章标签： java

本文链接：https://blog.csdn.net/CSDNMoney/article/details/104037825

版权

java 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

/**
     * 上传图片到本地
     */
    /**
 * 获取当前是否是windows系统
 * @return true代表为真
 */
public static boolean isWindows() {
    return System.getProperty("os.name").toLowerCase().contains("windows");
}
/**
 * 默认的上传文件路径
 * TODO 默认配置文件路径
 */
public final static String UPLOAD_PATH = isWindows() ? "C:/upload/" : "/usr/local/upload/";

/**上传图片接口**/
@RequestMapping(value = "/file/doUploadPic", method = RequestMethod.POST)
    @ResponseBody
    public ResultEntity doModifyHead(HttpServletRequest request) {
        // 转型为MultipartHttpRequest：
        MultipartFile file = null;
        ResultEntity resultEntity = new ResultEntity();
        try {
            if (request instanceof MultipartHttpServletRequest) {
                MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) request;
                multipartHttpServletRequest.getFileNames();
                file = multipartHttpServletRequest.getFile("file");
            }
            if (file == null) {
                return fail("请选择图片");
            }
            //获取图片扩展名
            String originalFilename = file.getOriginalFilename();
            //获取文件后缀
            String extName = file.getOriginalFilename().substring(originalFilename.lastIndexOf(".") + 1);
            //定义新文件名
            String fileName = RandomUtil.simpleUUID() + "." + extName;
            //本地访问路径
            String returnUrl = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() +"/static";//访问路径
            //文件存储位置
            String path = ToolString.UPLOAD_PATH;
            //获取文件夹路径
            File file1 =new File(path);
            //如果文件夹不存在则创建
            if(!file1.exists()  && !file1 .isDirectory()){
                file1 .mkdir();
            }
            //将图片存入文件夹
            File targetFile = new File(file1, fileName);
            file.transferTo(targetFile);
            //最后的图片访问路径
           String url=returnUrl+"/"+fileName;
            if (StringUtils.isNotBlank(url)) {
                resultEntity.setCode(ResultEntity.SUCCESS);
                resultEntity.setMessage("图片上传成功");
                Map<String, Object> data = new HashMap<>();
                data.put("imgUrl", url);
                System.out.println("图片地址 ：" + url);
                log.info("图片地址 ：" + url);
                resultEntity.setData(data);
            } else {
                return fail("上传失败！");
            }
        } catch (Exception e) {
            return fail("上传失败！");
        }
        return resultEntity;
    }
    
    /**配置类
     * 配置用于访问上传到本地的图片
     * @param registry
     */
    @Slf4j
	@Configuration
    public class AdminConfig extends WebMvcConfigurerAdapter {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**").addResourceLocations("file:///"+ ToolString.UPLOAD_PATH);//图片存储位置(c:/upload)
        super.addResourceHandlers(registry);
    }

通过ip访问图片
在这里插入图片描述

/**    oss上传
     * 文件上传接口
     */
    @ResponseBody
    @RequestMapping(value = "/s/file/upload", method = RequestMethod.POST)
    public ResultEntity fileUpload(MultipartFile file) throws Exception {
        ResultEntity resultEntity = new ResultEntity();
        resultEntity.setCode(ResultEntity.SUCCESS);

        //判断图片是否为空
        if (file.isEmpty()) {
            resultEntity.setCode(ResultEntity.FAIL);
            resultEntity.setMessage("图片为空");
            return resultEntity;
        }
        //上传到图片服务器
        try {
            //获取图片扩展名
            String originalFilename = file.getOriginalFilename();
            String extName = file.getOriginalFilename().substring(originalFilename.lastIndexOf(".") + 1);
            String fileName = RandomUtil.randomUUID() + "." + extName;
            String url = OSSClientUtils.uploadFile(file.getBytes(), "/upload/" + fileName);
            url = OSSClientUtils.ACCESS_BASE_PATH + "/" + url;
            resultEntity.setData(url);
            System.out.println("图片地址:" + url);
        } catch (Exception e) {
            e.printStackTrace();
            resultEntity.setCode(ResultEntity.FAIL);
            resultEntity.setMessage("图片上传失败");
        }

        return resultEntity;
    }

/**
     * oss上传工具类
     */
public class OSSClientUtils {
    private static final String ENDPOINT = "http://oss-cn-zhangjiakou.aliyuncs.com";
    private static final String ACCESSKEYID = "LTAI4FbvNFtcL6hYv";//填写自己的oss
    private static final String ACCESSKEYSECRET = "o0ZPmniI3M2QLx";
    private static final String BUCKETNAME =  "zjxls";
    private static final String BASE_PATH = "images";
    public static final String ACCESS_BASE_PATH = "http://zjxls.oss-cn-zhangjiakou.aliyuncs.com"; //访问前缀

    public static OSSClient getInstence(){
        OSSClient ossClient = new OSSClient(ENDPOINT,ACCESSKEYID,ACCESSKEYSECRET);
        ossClient.createBucket(BUCKETNAME);
        return ossClient;
    }

    /**
     * 通过httpclient 上传图片
     * @param imgFile 文件对象
     * @return 上传之后的图片路径
     */
    public static void doUpload(File imgFile, String filePath) throws Exception {
        OSSClient ossClient = getInstence();
        ossClient.putObject(BUCKETNAME,filePath,imgFile);
        ossClient.shutdown();
    }
    /**
     * 上传文件
     *
     * @param file_buff
     * @param filePath
     * @return
     */
    public static String uploadFile(final byte[] file_buff, final String filePath) {
        final String path = BASE_PATH + filePath;
        ossClient(o -> o.putObject(BUCKETNAME, path, new ByteArrayInputStream(file_buff)));
        return path;
    }
    private static void ossClient(Consumer<OSSClient> consumer) {
        OSSClient ossClient = new OSSClient(ENDPOINT, ACCESSKEYID, ACCESSKEYSECRET);
        try {
            consumer.accept(ossClient);
        } catch (Exception e) {
            e.printStackTrace();
            throw new RuntimeException("文件上传失败");
        } finally {
            // 关闭client
            ossClient.shutdown();
        }
    }
}

前端上传多张图片并预览，上传接口为上面的oss上传图片接口
            html
<div class="row" style="position: relative">
   <label class="col-sm-2 control-label">商品轮播图:<i class="required-help">*</i></label>
   <div class="col-sm-6 control-label" style="display: flex;justify-content: flex-start">
      <input class="filepath" onchange="changepic(this)" type="file"><br>
      <input id="pic" name="picList" type="text" value="${goods.picList}">
   </div>
   <div style="position: absolute;top: 50px;left: 150px;display: flex;align-items: center;">
      <div id="img_span" ></div>
      <div id="move" style="position: relative"></div>
   </div>
</div>
        js
//编辑初始化加载图片
var picList = $("#pic").val();
   var picArray =[];
if (picList.indexOf(",") == -1){
       picArray.push(picList);
} else {
       picArray = picList.split(',');
}
for (var i=0; i<picArray.length;i++){
       $("#move").after("<img src=\"\" id=\"show"+i+"\" width=\"100\" height='100' style=\"display: none;\"><p id=\"del"+i+"\" onclick='del(this.id)' style='display: none;text-align: center;margin-top: 5px;color: blue;'>删除</p>");
       $('#show'+i).attr('src',picArray[i]);//将图片的路径设置为返回上传的图片的地址
       $("#show"+i).show();//将图片设置为可见
       $("#del"+i).show();//将删除设置为可见
}
   //添加新图片
   var i=0;
   function changepic(obj) {
      var str = $("#pic").val();
      var picArray = [];
      if (str != ''){
          picArray = str.split(',');
          if (picArray.length > 4){
              top.layer.alert("轮播图最多上传五张!", {
                  icon: 5,
                  shadeClose: true
              });
              return false;
      }
   }
       //首先插入一个图片标签，src属性为空，宽高设置为100px，暂时设为不可见
       $("#move").after("<img src=\"\" id=\"show"+i+"\" width=\"100\" height='100' style=\"display: none;\"><p id=\"del"+i+"\" onclick='del(this.id)' style='display: none;text-align: center;margin-top: 5px;color: blue;'>删除</p>");
       //调用getObjectURL函数，返回上传的图片的地址
       var data = new FormData();
       data.append('file', obj.files[0]);
       $.ajax({
           type: "POST",
           async: false,
           contentType: false,
           processData: false,
           data: data,
           url: "/s/file/upload",
           success: function (data) {
               if (data.code === 200) {
                   var pic = $("#pic").val();
                   $('#pic').val(pic == ''?pic+data.data:pic+','+data.data);
                   $('#show'+i).attr('src',data.data);//将图片的路径设置为返回上传的图片的地址
                   $("#show"+i).show();//将图片设置为可见
                   $("#del"+i).show();
                   parent.notifications('success', '上传成功');
               } else {
                   parent.notifications('error', '上传失败');
               }
           },
           error: function (XMLHttpRequest, textStatus, errorThrown) {
               parent.notifications('error', '操作失败,请检查网络!');
           },
       });
       i++;
   }
    //删除图片
   function del(obj) {
       var str = obj.substring(3);
       var picUrl = [];
       picUrl = $("#pic").val().split(",");
       for(let i=0;i<picUrl.length;i++){
           if(picUrl[i]==''){
               picUrl.splice(i, 1)
           }
           if($("#show"+str)[0].src==picUrl[i] ) {
               picUrl.splice(i, 1)
           }
       }
       var newStr = picUrl.join(',');
       $("#pic").val(newStr);
       //移除img和删除标签
       $("#show"+str).remove();
       $("#del"+str).remove();
   }