OSS上传图片无法在线预览的解决方案

OSS上传图片无法在线预览的解决方案

---

最近在做的项目涉及到商品详情，由于前端用的flutter框架并且该详情为富文本，dart语言关于富文本的组件不是非常友好，当富文本中的图片无法在浏览器中直接预览的时候（有时提示为下载链接），富文本组件无法显示。

---

先记录一下踩过的坑： 富文本中的图片也需要相应的服务器进行存储，否则会直接转化成十六进制码存放在数据库中，如果图片尺寸很大，尤其像商品详情那样的长图来说，不管是存储还是网络传输，都是非常消耗性能的，所以富文本中的图片也需要上传至服务器。我的后台管理系统使用的是的react框架，用到的一款富文本编辑组件是wangeditor，该组件可以设置嵌套图片的上传路径以及大小限制，非常方便，推荐使用。

下列是我的后台管理系统自己封装的富文本组件：

import React from 'react';
import PropTypes from 'prop-types';
import { noop, get } from 'lodash';
import E from 'wangeditor';
import { message } from 'antd';
import CustomConfig from '../../../../env'
import {getToken} from "../../../../utils/authority";

export class RichTextEditor extends React.Component {
  componentDidMount() {
    const { value, onChange } = this.props;
    const elem = this.editor;
    const editor = new E(elem);
    this.configUploadPic(editor);
    // 使用 onchange 函数监听内容的变化，并实时更新到 state 中
    editor.customConfig.onchange = html => {
      onChange(html);
    };
    editor.create();
    editor.txt.html(value);
  }

  configUploadPic = editor => {
    editor.customConfig.uploadImgServer = CustomConfig.BASE_URL + '/api/file/upload_embed_image';
    editor.customConfig.uploadImgHeaders = {
      //添加token
      authorization: getToken(),
    };
    editor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024; // 图片大小限制5M
    editor.customConfig.uploadImgMaxLength = 1; //一次最多一张图片
    editor.customConfig.uploadImgTimeout = 25000; //25秒超时
    editor.customConfig.uploadFileName = 'file';
    editor.customConfig.customAlert = function(info) {
      // info 是需要提示的内容
      console.log(info);
    };
    editor.customConfig.uploadImgHooks = {
      error: function(xhr, editor) {
        // 图片上传出错时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        message.error(`图片上传失败,${get(xhr, ['responseText'])}`);
      },
      timeout: function(xhr, editor) {
        // 图片上传超时时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        message.error(`图片上传超时！`);
      },

      // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
      // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
      customInsert: function(insertImg, result, editor) {
        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
        const url = result.url;
        insertImg(url);
        // result 必须是一个 JSON 格式字符串！！！否则报错
      },
    };
  };

  render() {
    return (
      <div
        ref={ref => {
          this.editor = ref;
        }}
      />
    );
  }
}

RichTextEditor.protoType = {
  value: PropTypes.string,
  onChange: PropTypes.func,
};

RichTextEditor.defaultProps = {
  value: '',
  onChange: noop,
};

顺便提一下，lodash是一款非常方便、高效的集合处理工具，推荐使用。

回到正题

由于我使用的是阿里提供的OSS对象存储，我在网上查找了相关的资料，都找不到相应的解决方案，最后查看了官方的开发文档，设置Content-type之后终于得到解决，下面是相关代码（使用kotlin）：

    private fun MultipartFile.savePic(folderName:String = "pic"):String {
        fun getExtension(): String {
            val extension = this.originalFilename.orEmpty().substringAfterLast(".", "")
            return if (extension.isEmpty()) {
                ""
            } else
                ".$extension"
        }

        // 添加 ContentType (添加后可在浏览器中直接浏览，而非下载链接)
        val objectMetadata = ObjectMetadata()
        objectMetadata.contentType = "image/jpg"

        val objName = "$folderName/${UUID.randomUUID()}${getExtension()}"
        try {
            ossClient.putObject(bucketName, objName, this.inputStream, objectMetadata)
        } catch (e: Exception) {
            logger.error("上传图片失败", e)
            throw BadRequestException("上传图片失败")
        }
        return objName
    }