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

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

在此我使用的是七牛云作为示例，原因就是10G以内免费。对于个人博客来说足以。

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

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

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

具体格式如：

cdn.example.com
img.example.com

接下来需要配置CNAME

官网关于配置CNAME的教程

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

记录值就是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