在做博客项目练手时,除了CRUD,支持Markdown语法。最能够丰富你的博客内容的,莫过于给你的博客加上图片,不论是封面图,还是博客中的流程图等。加上图片,就相当于注入了灵魂,给你的博客锦上添花!
在此我使用的是七牛云作为示例,原因就是10G以内免费。对于个人博客来说足以。
登录七牛云官网进行注册,实名认证,并开启对象存储。新建空间。(建议使用私有空间,防止被人利用图床)
创建成功后会自动生成一个测试域名,30后过期。建议绑定自己的域名!
绑定域名需要自己云服务器,并且购买域名,再进行域名备案,最后进行域名解析。(再次不在赘述)
具体格式如:
cdn.example.com
img.example.com
接下来需要配置CNAME
进入您购买的云服务平台相关的云解析DNS列表,添加记录。
记录值就是CNAME的值
接下来进入正题,将图片上传到我们注册的对象存储私有空间中。
上传图片需要前后端的配合,前端负责将请求发送到后端,后端通过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