• 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
        }
    
  • 相关阅读:
    mysql lock
    yii2引入js和css
    Yii 2.x 和1.x区别以及yii2.0安装
    Curl https 访问
    boost::any 用法
    boost单元测试框架
    shared_ptr的线程安全
    nginx php fastcgi安装
    ip相关
    Design Pattern Explained 读书笔记二——设计模式序言
  • 原文地址:https://www.cnblogs.com/tian874540961/p/12058544.html
Copyright © 2020-2023  润新知