欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

解决web项目上传图片不能及时回显的问题

程序员文章站 2022-03-18 18:07:02
...

遇到问题

在以前接触的web项目凡是涉及到需要上传图片,以及上传图片后需要及时回显的问题时,我的解决办法总是很死板。就是在项目中添加资源的本地映射路径,又因为在IDEA中通过
String path = System.getProperty("user.dir");
获取项目相对根路径后图片依然不能及时回显(有知道具体原因的望告知),所以只好将路径写死,eg:

registry.addResourceHandler("/userImage/**").addResourceLocations("file:D:\\****\\****\\workspace\\download\\usedweb\\src\\main\\resources\\static\\userImage\\");

这样做的坏处就是当我们需要将项目部署到服务器上,如阿里云服务器时,想要项目跑通必须要重新配置资源的映射路径,非常的麻烦。

解决办法

无意中看到阿里云的OSS(Object Storage Service)对象存储服务,是阿里云提供的海量、安全、低成本、高可靠的云存储服务,你可以使用阿里云提供的 API、SDK 接口或者 OSS 迁移工具轻松地将海量数据移入或移出阿里云 OSS。OSS 具有与平台无关的 RESTful API 接口,你可以在任何应用、任何时间、任何地点存储和访问任意类型的数据。简单来说就是你将你的资源文件如图片、视频等等上传到阿里提供的云储存中,然后按照他的规则通过url调用你上传的资源,由于储存在云上,所以不涉及本地的资源映射,也就没有了上面所说的问题。

简单实例

OSS配置属性(yml文件)

userImage:
  endpoint: oss-cn-chengdu.aliyuncs.com
  keyid:你自己的accesskey
  keysecret: 你自己的accesskeySec
  bucketname: sec-deal-res
  filehost: userImage
  default-avatar: http://sec-deal-res.oss-cn-chengdu.aliyuncs.com/userImage/avatar/default.jpg
  protocol: http://
  no-pro-avatar: http://sec-deal-res.oss-cn-chengdu.aliyuncs.com/userImage/404pro.jpg

OSS配置属性实体类

/**
 * OSS配置属性实体类
 * Created by Chenge on 2020.3.18 12:15
 */
@Component
public class AliConfEntity {
    @Value("${userImage.endpoint}")
    private   String endpoint;
    @Value("${userImage.keyid}")
    private  String keyid;
    @Value("${userImage.keysecret}")
    private  String keysecret;
    @Value("${userImage.filehost}")
    private  String filehost;
    @Value("${userImage.bucketname}")
    private  String bucketname;
    @Value("${userImage.default-avatar}")
    private String defaultAvatar;
    @Value("${userImage.protocol}")
    private String protocol;
    @Value("${userImage.no-pro-avatar}")
    private String noProAvatar;

	getter...setter...toString
}

自定义工具类(上传、删除图片)

@Autowired
    private AliConfEntity aliConfEntity;

    public String upload(MultipartFile file, String fileName){
        if(file == null){
            return null;
        }
        OSSClient client = new OSSClient(aliConfEntity.getEndpoint(),aliConfEntity.getKeyid(),aliConfEntity.getKeysecret());
        if (!client.doesBucketExist(aliConfEntity.getBucketname())){
            // 判断容器是否存在,不存在就创建
            client.createBucket(aliConfEntity.getBucketname());
            CreateBucketRequest request = new CreateBucketRequest(aliConfEntity.getBucketname());
            // 设置权限(公开读)
            request.setCannedACL(CannedAccessControlList.PublicRead);
            client.createBucket(request);
        }
        //开始上传文件
        String basePath = aliConfEntity.getFilehost()+fileName;
        PutObjectResult result = null;
        try {
            result = client.putObject(new PutObjectRequest(aliConfEntity.getBucketname(),basePath,new ByteArrayInputStream(file.getBytes())));
        } catch (IOException e) {
            e.printStackTrace();
        }
        client.setBucketAcl(aliConfEntity.getBucketname(),CannedAccessControlList.PublicRead);
        if (result != null){
            return "success";
        }
        return "error";
    }
    /**
     * 删除oss上面的文件
     * @param fileName 文件名,应该时文件路径,从filehost开始
     */
    public void dealFile(String fileName){
        OSSClient client = new OSSClient(aliConfEntity.getEndpoint(),aliConfEntity.getKeyid(),aliConfEntity.getKeysecret());
        client.deleteObject(aliConfEntity.getBucketname(),fileName);
    }

图片上传正常

解决web项目上传图片不能及时回显的问题

如果你也是相关问题,并通过此方法解决,记得给我点个赞!!!