markdown与腾讯对象存储COS的整合实现图片上传与预览参考

前端部分

直接上代码

	<div class="form-group" id="question-editor">
	    <label for="description">问题补充</label>
	    <!--添加富文本编辑器-->
	    <textarea id="description" class="form-control" name="description"
		    placeholder="问题描述" rows="20" th:text="${description}"
		    style="display:none;">
	    </textarea>
    </div>
    <script type="text/javascript">
         $(function () {
             var editor = editormd("question-editor",{
             width: "100%",
             height: 350,
             path: "/js/lib/",
             delay: 0,
             watch: false,
             placeholder: "输入问题描述",
             imageUpload: true,
             imageFormats: ["jpg", "jpeg", "gif", "png"],
             imageUploadURL: "/file/upload"
             })
           })
     </script>

此处主要注意两个编辑器配置：
1、imageUpload： true 开启图片上传功能
2、imageUploadURL: “/file/upload” 配置你的后台处理路由

后端部分

首先在腾讯云注册一个对象存储服务，不用担心费用问题，只要访问量够低，可以说是免费的，下一步就是新建一个存储桶，根据cos的规定，桶名一般是“自定义名-appid”。

创建完成后可以加一些文件夹对存储对象进行分类。

下面进入代码部分

COS工具类

@Service
public class COSProvider {
    @Value("${cos.secretId}")
    private String secretId;
    @Value("${cos.secretKey}")
    private String secretKey;
    @Value("${cos.bucketName}")
    private String bucketName;
    @Value("${cos.bucket.prePath}")
    private String prePath;
    @Value("${cos.region}")
    private Region region;


    public String upload(File file) {

        COSCredentials cred = new BasicCOSCredentials(secretId, secretKey);
        // 2 设置 bucket 的区域, COS 地域的简称请参照 https://cloud.tencent.com/document/product/436/6224
// clientConfig 中包含了设置 region, https(默认 http), 超时, 代理等 set 方法, 使用可参见源码或者常见问题 Java SDK 部分。
        ClientConfig clientConfig = new ClientConfig(region);
        // 3 生成 cos 客户端。
        COSClient cosClient = new COSClient(cred, clientConfig);
        String fileName = file.getName();
        String[] fileNames = fileName.split("\\.");
        if(fileNames == null){
            return null;
        }
        String key = prePath+ UUID.randomUUID().toString()+"."+fileNames[fileNames.length-1];//可以加上对象存储空间的路径前缀（文件夹）

        try {
            // 指定要上传的文件
            // 指定要上传到的存储桶
            // 指定要上传到 COS 上对象键
            PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName, key, file);
            cosClient.putObject(putObjectRequest);
        } catch (CosServiceException serverException) {
            serverException.printStackTrace();
            return null;
        } catch (CosClientException clientException) {
            clientException.printStackTrace();
            return null;
        }
        //使用永久密钥生成一个带签名的下载链接
        GeneratePresignedUrlRequest req = new GeneratePresignedUrlRequest(bucketName, key, HttpMethodName.GET);
        // 设置签名过期时间(可选), 若未进行设置, 则默认使用 ClientConfig 中的签名过期时间(1小时)
        // 这里设置签名在半个小时后过期
        Date expirationDate = new Date(System.currentTimeMillis() + 3000L * 60L * 1000L);
        req.setExpiration(expirationDate);
        URL url = cosClient.generatePresignedUrl(req);
        cosClient.shutdown();
        return url.toString();
    }

    public static void inputStreamToFile(InputStream ins, File file) {
        try {
            OutputStream os = new FileOutputStream(file);
            int bytesRead = 0;
            byte[] buffer = new byte[8192];
            while ((bytesRead = ins.read(buffer, 0, 8192)) != -1) {
                os.write(buffer, 0, bytesRead);
            }
            os.close();
            ins.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

说明：
1、首先：在配置文件中定义个人信息，包括存储桶名bucketName、地区代号region以及个人api访问密钥：secretId与secretKey
2、upload方法是将一个file对象上传到指定存储桶的指定路径文件夹下，并且指定他的对象名。对象名的指定我使用UUID来产生特殊名字，再用file对象的后缀格式组成，保证对象在存储桶中的唯一性。
3、try结构中的client.putObject()就是上传对象，try结构下的就是生成一条预览链接，用于markdown编辑的在线预览。
Date expirationDate = new Date(System.currentTimeMillis() + 3000L * 60L * 1000L);这行代码用于设定有效期，单位毫秒。
4、方法返回的就是预览链接，或者说临时下载链接。

控制器部分

@Controller
public class FileUploadController {

    @Autowired
    private COSProvider cosProvider;

    @ResponseBody
    @RequestMapping("/file/upload")
    public FileDTO upload(HttpServletRequest request){
        FileDTO fileDTO = new FileDTO();
        MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) request;
        MultipartFile multipartFile = multipartHttpServletRequest.getFile("editormd-image-file");
        if(multipartFile == null){
            fileDTO.setSuccess(0);
            fileDTO.setMessage("文件上传失败！");
            fileDTO.setUrl(null);
        }
        String url = null;
        try {
            //获取输入流
            InputStream inputStream = multipartFile.getInputStream();

            File toFile = new File(multipartFile.getOriginalFilename());
            COSProvider.inputStreamToFile(inputStream, toFile);
            url = cosProvider.upload(toFile);
        } catch (IOException e) {
            e.printStackTrace();
        }

        fileDTO.setSuccess(1);
        fileDTO.setMessage("文件上传成功！");
        fileDTO.setUrl(url);
        return fileDTO;
    }
}

FileDTO

@Data
public class FileDTO {
    private int success;
    private String message;
    private String url;
}

说明：
1、定义一个文件上传结果返回对象，此对象不能随意定义，必须使用 success message url 这三个成员变量名来表示。否则json传到前端，markdown中的js无法自动解析出所需变量，这会导致存储桶中显示对象上传成功，但markdown没用预览链接生成。
2、由于cos_api中貌似没有对inputstream的上传，所以需要使用COSProvider类中的
inputStreamToFile方法来生成file对象，但此方法也只能支持小文件的上传。

测试如下 谷歌浏览器

插入两张图片的效果

测试完成

注意：在上线后发现，360浏览器在对象上传成功后会弹出保存json的窗口，markdown没解析json，导致客户端无法预览图片，在谷歌浏览器上测试正常；本地测试都正常！