实现图片上传功能 给博客注入灵魂 手把手教学

在做博客项目练手时,除了CRUD,支持Markdown语法。最能够丰富你的博客内容的,莫过于给你的博客加上图片,不论是封面图,还是博客中的流程图等。加上图片,就相当于注入了灵魂,给你的博客锦上添花!

实现图片上传功能 给博客注入灵魂 手把手教学_第1张图片
在此我使用的是七牛云作为示例,原因就是10G以内免费。对于个人博客来说足以。

登录七牛云官网进行注册,实名认证,并开启对象存储。新建空间。(建议使用私有空间,防止被人利用图床)

实现图片上传功能 给博客注入灵魂 手把手教学_第2张图片

创建成功后会自动生成一个测试域名,30后过期。建议绑定自己的域名!

实现图片上传功能 给博客注入灵魂 手把手教学_第3张图片

绑定域名需要自己云服务器,并且购买域名,再进行域名备案,最后进行域名解析。(再次不在赘述)

具体格式如:

cdn.example.com
img.example.com

接下来需要配置CNAME

官网关于配置CNAME的教程

进入您购买的云服务平台相关的云解析DNS列表,添加记录。

实现图片上传功能 给博客注入灵魂 手把手教学_第4张图片

记录值就是CNAME的值

在这里插入图片描述

接下来进入正题,将图片上传到我们注册的对象存储私有空间中。

官方Java SDK文档

上传图片需要前后端的配合,前端负责将请求发送到后端,后端通过request获取文件资源,转化为字节流传输到云存储服务器。

首先,获取请求。返回状态码,url。

@Controller
public class FileController {

    @Autowired
    private QiniuProvider qiniuProvider;

    @RequestMapping("/file/upload")
    @ResponseBody
    public FileDTO upload(HttpServletRequest request) {
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        // 获取图片资源
        MultipartFile file = multipartRequest.getFile("editormd-image-file");
        try {
        	// 上传图片,返回带有token的url
            String fileURL = qiniuProvider.upload(file.getInputStream());
            FileDTO fileDTO = new FileDTO();
            fileDTO.setSuccess(1);
            fileDTO.setUrl(fileURL);
            return fileDTO;
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }
}

上传图片,填写配置信息是注意bucket是你的空间名称。domain of bucket 是你的空间域名,记得加上http前缀

@Component
public class QiniuProvider {
	// 配置信息
    @Value("${qiniu.access_token}")
    private String AK;
    @Value("${qiniu.secret_token}")
    private String SK;
    @Value("${qiniu.bucket}")
    private String BUCKET;
    @Value("${qiniu.domain_of_bucket}")
    private String DOMAIN_OF_BUCKET;


    public String upload(InputStream inputStream) throws QiniuException {
    	// 设置文件名
        String filename = UUID.randomUUID().toString();
        Auth auth = Auth.create(AK, SK);
        String token = auth.uploadToken(BUCKET);
        Configuration cfg = new Configuration(Region.huanan());
        UploadManager uploadManager = new UploadManager(cfg);
        Response response = uploadManager.put(inputStream, filename, token, null, null);
        if (response.isOK()) {
            return download(filename);
        }
        return null;
    }

    public String download(String filename) {
        Auth auth = Auth.create(AK, SK);
        String publicUrl = String.format("%s/%s", DOMAIN_OF_BUCKET, filename);
        // 过期时间,返回Url
        long expireInSeconds = 31536000;
        return auth.privateDownloadUrl(publicUrl, expireInSeconds);
    }
}

至此,图片上传功能已经实现,代码写的不好,多多包涵!有不对的地方,欢迎留言!

i
实现图片上传功能 给博客注入灵魂 手把手教学_第5张图片

你可能感兴趣的:(实现图片上传功能 给博客注入灵魂 手把手教学)