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

    }