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

遇到问题

在以前接触的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);
    }

图片上传正常

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