oss上传文件不能在浏览器直接打开_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() {