• ruoyi实现富文本生成网页功能，vue实现wangEditro功能，网页静态化，二维码预览网页

    先看效果

     

     

     

     废话不多直接上代码，也不墨迹了，代码自己拿去跑，前段代码没什么依赖，可以直接跑起来

    注意点

    1,：需要安装QRCode 组件，自己百度去

    2：需要安装wangEditor富文本编辑器组件，版本5，请上官网自己找教程，找vue版本的，安装很复杂，貌似还有兼容问题，如果有问题在回复我，我用的是ruoyi3.7.0

    1. <template>
    2.   <div class="app-container">
    3.  
    4.     <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
    5.       <el-form-item label="标题" prop="picNm">
    6.         <el-input v-model="queryParams.picNm" size="small" clearable>el-input>
    7.       el-form-item>
    8.  
    9.       <el-form-item label="投放时间" prop="releaseTime">
    10.         <el-date-picker clearable size="small"
    11.                         v-model="queryParams.releaseTime"
    12.                         type="date"
    13.                         value-format="yyyy-MM-dd"
    14.         >
    15.         el-date-picker>
    16.       el-form-item>
    17.  
    18.       <el-form-item>
    19.         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索el-button>
    20.         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置el-button>
    21.       el-form-item>
    22.     el-form>
    23.  
    24.     <el-form label-width="68px">
    25.       <el-row :gutter="10" class="mb8">
    26.         <el-col :span="1.5">
    27.           <el-button
    28.             type="primary"
    29.             plain
    30.             size="mini"
    31.             @click="handleAdd"
    32.             v-hasPermi="['web:lunbo:list']"
    33.           >新增
    34.           el-button>
    35.         el-col>
    36.         <el-col :span="1.5">
    37.           <el-button
    38.             type="success"
    39.             plain
    40.             size="mini"
    41.             :disabled="single"
    42.             @click="handleUpdate"
    43.             v-hasPermi="['web:lunbo:list']"
    44.           >修改
    45.           el-button>
    46.         el-col>
    47.         <el-col :span="1.5">
    48.           <el-button
    49.             type="danger"
    50.             plain
    51.             size="mini"
    52.             :disabled="multiple"
    53.             @click="handleDelete"
    54.             v-hasPermi="['web:lunbo:list']"
    55.           >删除
    56.           el-button>
    57.         el-col>
    58.         
    59.         
    60.         
    61.         
    62.         
    63.         
    64.         
    65.         
    66.         
    67.         
    68.         
    69.         
    70.       el-row>
    71.     el-form>
    72.  
    73.     <el-table border v-loading="loading" :data="lunboList" @selection-change="handleSelectionChange">
    74.       <el-table-column type="selection" width="55" align="center"/>
    75.       
    76.       <el-table-column label="标题" align="left" prop="picNm" :show-overflow-tooltip="true"/>
    77.       
    78.  
    79.  
    80.       <el-table-column label="封面图片" align="center" prop="picAddr" width="150">
    81.         <template slot-scope="scope">
    82.           <el-image
    83.             style="height: 35px;padding: 0"
    84.             fit="fill"
    85.             :src="conf.imgUrlDeal(scope.row.picAddr)"
    86.           >
    87.           el-image>
    88.         template>
    89.       el-table-column>
    90.  
    91.       <el-table-column label="描述" align="left" prop="picDesc" width="160" :show-overflow-tooltip="true"/>
    92.  
    93.       <el-table-column label="是否展示" align="center" prop="picShow" width="110">
    94.         <template slot-scope="scope">
    95.  
    96.           <el-switch
    97.             class="switch"
    98.             v-model="scope.row.picShow"
    99.             :validate-event="true"
    100.             active-text="显示"
    101.             inactive-text="隐藏"
    102.             active-value="0"
    103.             inactive-value="1"
    104.             @change="isShowTypeChange(scope.row)"
    105.           />
    106.  
    107.         template>
    108.       el-table-column>
    109.  
    110.       <el-table-column label="广告链接" align="left" prop="picHyperlink" :show-overflow-tooltip="true">
    111.         <template slot-scope="scope">
    112.           <span @click="conf.openIframe(scope.row.picHyperlink,show,urlItem)">
    113.               <el-link type="primary" style="font-size: 11px" target="_blank">{{ scope.row.picHyperlink }}el-link>
    114.           span>
    115.         template>
    116.       el-table-column>
    117.  
    118.       
    119.       
    120.       
    121.       
    122.       
    123.       
    124.       <el-table-column label="更新人" align="center" prop="modifier" width="90"/>
    125.       <el-table-column label="更新时间" align="center" prop="modifyDt" width="125">
    126.         <template slot-scope="scope">
    127.           <span>{{ parseTime(scope.row.modifyDt, '{y}-{m}-{d}') }}span>
    128.         template>
    129.       el-table-column>
    130.  
    131.       <el-table-column label="投放开始时间" align="center" prop="modifyDt" width="125">
    132.         <template slot-scope="scope">
    133.           <span>{{ parseTime(scope.row.releaseTime, '{y}-{m}-{d}') }}span>
    134.         template>
    135.       el-table-column>
    136.       <el-table-column label="投放结束时间" align="center" prop="modifyDt" width="125">
    137.         <template slot-scope="scope">
    138.           <span>{{ parseTime(scope.row.lockTime, '{y}-{m}-{d}') }}span>
    139.         template>
    140.       el-table-column>
    141.  
    142.       
    143.       
    144.       
    145.       
    146.       
    147.       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
    148.         <template slot-scope="scope">
    149.  
    150.           <el-button slot="reference" size="mini" type="text"
    151.                      @click="creatQrCode(scope.row.picHyperlink)"
    152.           > 预览
    153.           el-button>
    154.  
    155.           <el-button
    156.             size="mini"
    157.             type="text"
    158.             icon="el-icon-edit"
    159.             @click="handleUpdate(scope.row)"
    160.             v-hasPermi="['web:lunbo:list']"
    161.           >修改
    162.           el-button>
    163.           <el-button
    164.             size="mini"
    165.             type="text"
    166.             icon="el-icon-delete"
    167.             @click="handleDelete(scope.row)"
    168.             v-hasPermi="['web:lunbo:list']"
    169.           >删除
    170.           el-button>
    171.         template>
    172.       el-table-column>
    173.     el-table>
    174.  
    175.     <pagination
    176.       v-show="total>0"
    177.       :total="total"
    178.       :page.sync="queryParams.pageNum"
    179.       :limit.sync="queryParams.pageSize"
    180.       @pagination="getList"
    181.     />
    182.  
    183.     
    184.     <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
    185.       <el-form :inline="true" ref="form" :model="form" :rules="rules" label-width="100px">
    186.  
    187.         <el-row>
    188.           <el-col :span="12">
    189.             <el-form-item label="标题" prop="picNm">
    190.               <el-input style="width: 360px" @change="updateRichHtml" v-model="form.picNm"/>
    191.             el-form-item>
    192.  
    193.             <el-form-item label="描述" prop="picDesc">
    194.               <el-input style="width: 360px" v-model="form.picDesc"/>
    195.             el-form-item>
    196.  
    197.             <el-form-item label="是否显示" prop="picShow">
    198.               <el-checkbox-group v-model="form.picShow"
    199.                                  @change="((val)=> {
    200.                                    form.picShow = (val == 'null' || !val) ? nextItem.picShow : val;
    201.                                    nextItem.picShow = form.picShow;
    203.                                  })"
    204.               >
    205.                 <el-checkbox false-label="null" true-label="0">显示el-checkbox>
    206.                 <el-checkbox false-label="null" true-label="1">隐藏el-checkbox>
    207.               el-checkbox-group>
    208.             el-form-item>
    209.  
    210.             
    211.             
    212.             
    213.             
    214.             
    215.             
    216.             
    217.             
    218.             
    219.  
    220.             
    221.             
    222.             
    223.             
    224.             
    225.             
    226.             
    227.             
    228.             
    229.  
    230.             <el-form-item label="网页类型" prop="pageType">
    231.               <el-checkbox-group v-model="form.pageType"
    232.                                  @change="((val)=> {
    233.                                  form.pageType = (val == 'null' || !val) ? nextItem.pageType : val;
    234.                                  nextItem.pageType = form.pageType;
    235.                                  show.richText = form.pageType == '0'
    236.                                })"
    237.               >
    238.                 <el-checkbox false-label="null" true-label="1">第三方el-checkbox>
    239.                 <el-checkbox false-label="null" true-label="0">本地页面el-checkbox>
    240.               el-checkbox-group>
    241.             el-form-item>
    242.  
    243.           el-col>
    244.  
    245.           <el-col :span="12">
    246.             <el-form-item label="封面图片" prop="picAddr">
    247.               <div class="avatar-uploader">
    248.                 <el-upload style="width: 360px" action="#" accept=".jpg,.png,.jpeg" :http-request="requestUpload"
    249.                            :show-file-list="false"
    250.                            :before-upload="beforeUpload"
    251.                 >
    252.  
    253.                   
    254.                   <el-image v-if="form.picNmFile" fit="contain" style="max-width: 100%" :src="form.picAddr"
    255.                             class="avatar"
    256.                   />
    257.                   
    258.                   <el-image v-else-if="form.picAddr" fit="contain" style="max-width: 100%" :src="baseUrl + form.picAddr"
    259.                             class="avatar"
    260.                   />
    261.                   <i v-else class="el-icon-plus avatar-uploader-icon">i>
    262.                 el-upload>
    263.                 <span style="color: #999999;font-size: 11px">{{ routeQueryParms.picstr }}span>
    264.               div>
    265.             el-form-item>
    266.           el-col>
    267.         el-row>
    268.  
    269.         <el-row>
    270.           <el-col :span="12">
    271.             <el-form-item label="跳转链接" prop="picHyperlink">
    272.               <el-input type="textarea" style="width: 360px" v-model="form.picHyperlink"/>
    273.             el-form-item>
    274.           el-col>
    275.  
    276.  
    277.           <el-col :span="12">
    278.             <el-form-item label="备注" prop="remarks">
    279.               <el-input v-model="form.remarks" style="width: 360px" type="textarea">el-input>
    280.             el-form-item>
    281.           el-col>
    282.         el-row>
    283.  
    284.         <el-row>
    285.  
    286.           <el-col :span="12">
    287.             <el-form-item label="发布时间" prop="releaseTime">
    288.               <el-date-picker
    289.                 style="width: 360px"
    290.                 size="small"
    291.                 value-format="yyyy-MM-dd HH:mm:ss"
    292.                 v-model="form.releaseTime"
    293.                 type="daterange"
    294.                 align="right"
    295.                 unlink-panels
    296.                 range-separator="至"
    297.                 start-placeholder="发布时间"
    298.                 end-placeholder="截止时间"
    299.                 :picker-options="conf.pickerOptions"
    300.               >
    301.               el-date-picker>
    302.             el-form-item>
    303.           el-col>
    304.         el-row>
    305.         
    306.         
    307.         
    308.         
    309.         
    310.  
    311.  
    312.         
    313.         <div style="display: flex;justify-content: space-between" v-show="show.richText">
    314.           <div style="width: 100px;text-align: right;padding-right: 15px">
    315.             网页内容
    316.           div>
    317.           <div style="border: 1px solid #ccc;width: 98%;z-index: 9999">
    318.             <Toolbar
    319.               class="toolbar_1"
    320.               :editor="editorItem.editor"
    321.               :defaultConfig="editorItem.toolbarConfig"
    322.               :mode="editorItem.mode"
    323.             />
    324.             
    325.  
    326.             <Editor
    327.               ref="editor"
    328.               style="height:410px; overflow-y: scroll;width: 100%;background-color:white;"
    329.               v-model="form.richText"
    330.               :defaultConfig="editorItem.editorConfig"
    331.               :mode="editorItem.mode"
    332.               @onCreated="onCreated"
    333.             />
    334.           div>
    335.         div>
    336.         
    337.  
    338.  
    339.         
    340.         
    341.         
    342.  
    343.  
    344.       el-form>
    345.       <div slot="footer" class="dialog-footer">
    346.         <el-button type="primary" @click="submitForm">确 定el-button>
    347.         <el-button @click="cancel">取 消el-button>
    348.       div>
    349.     el-dialog>
    350.  
    351.     <el-dialog
    352.       title="扫码预览"
    353.       :visible.sync="show.qrCode"
    354.       width="400px"
    355.       top="50vh"
    356.     >
    357.       <div style="display: flex;justify-content: center;">
    358.         <div class="qrcode" ref="qrcode">div>
    359.       div>
    360.       
    361.     el-dialog>
    362.  
    363.     <el-dialog
    364.       title="预览网页"
    365.       :visible.sync="show.html"
    366.       width="500px"
    367.       height="950px"
    368.       @close="()=>{urlItem.htmlUrl = null}"
    369.     >
    370.       <div style="display: flex;justify-content: center;">
    371.  
    372.         <iframe :src="urlItem.htmlUrl" height="800" width="550" title="广告预览" frameborder="0">iframe>
    373.  
    374.       div>
    375.       
    376.     el-dialog>
    377.  
    378.   div>
    379.  
    380. template>
    381.  
    382. <script>
    383. import { listLunbo, getLunbo, delLunbo, addLunbo, updateLunbo, exportLunbo, picShowUpdate } from '@/api/gzApi/lunbo'
    384. // import { getToken } from '@/utils/auth'
    385. import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
    386. import '@wangeditor/editor/dist/css/style.css'
    387. import editorConfig from '@/utils/wangEditor'
    388. import { pickerOptions, openIframe, imgUrlDeal, getNowDate } from '@/utils/elementuiConf'
    389. import { DomEditor } from '@wangeditor/editor'
    390. // 配置编辑器是否支持滚动，默认为 true
    391. import QRCode from 'qrcodejs2'
    392.  
    393. export default {
    394.   // dom中的editor
    395.   components: { Editor, Toolbar },
    396.   dicts: ['isok'],
    397.   name: 'Lunbo',
    398.   data() {
    399.     return {
    400.       urlItem: {
    401.         htmlUrl: null
    402.       },
    403.       conf: {
    404.         pickerOptions: pickerOptions,
    405.         openIframe: openIframe,
    406.         imgUrlDeal: imgUrlDeal
    407.       },
    408.       show: {
    409.         richText: false,
    410.         qrCode: false,
    411.         html: false
    412.       },
    413.       nextItem: {
    414.         picShow: null,
    415.         pageType: '1',
    416.         contentTitle: '{#标题#}'
    417.       },
    418.       editorItem: {
    419.         editor: null,
    420.         html: '',
    421.         // 工具栏配置
    422.         // toolbarConfig:,
    423.         editorConfig: editorConfig,
    424.         mode: 'default' // or 'simple'
    425.       },
    426.       // headerObj: {
    427.       //   Authorization: 'Bearer ' + getToken()
    428.       // },
    429.       routeQueryParms: {},
    430.       // 后台地址
    431.       baseUrl: process.env.VUE_APP_BASE_API,
    432.       // 遮罩层
    433.       loading: true,
    434.       // 导出遮罩层
    435.       exportLoading: false,
    436.       // 选中数组
    437.       ids: [],
    438.       picNms: [],
    439.       // 非单个禁用
    440.       single: true,
    441.       // 非多个禁用
    442.       multiple: true,
    443.       // 显示搜索条件
    444.       showSearch: true,
    445.       // 总条数
    446.       total: 0,
    447.       // 广告轮播图表格数据
    448.       lunboList: [],
    449.       // 弹出层标题
    450.       title: '',
    451.       // 是否显示弹出层
    452.       open: false,
    453.       // 查询参数
    454.       queryParams: {
    455.         pageNum: 1,
    456.         pageSize: 10,
    457.         picShow: null,
    458.         adType: null,
    459.         pageType: null,
    460.         picNm: null,
    461.         releaseTime: null
    462.       },
    463.       // 表单参数
    464.       form: { pageType: '1' },
    465.       // 表单校验
    466.       rules: {
    467.         picNm: [
    468.           { required: true, message: '标题不能为空', trigger: 'blur' }
    469.         ],
    470.         releaseTime: [
    471.           { required: true, message: '请选择发布时间', trigger: 'blur' }
    472.         ],
    473.         picAddr: [
    474.           { required: true, message: '请添加图片', trigger: 'blur' },
    475.           {
    476.             validator: (rule, value, callback) => {
    477.               if (!this.form.picAddr) {
    478.                 return callback(new Error('请添加图片'))
    479.               } else {
    480.                 callback()
    481.               }
    482.             },
    483.             trigger: ['blur', 'change']
    484.           }
    485.         ],
    486.         picDesc: [
    487.           { required: true, message: '描述不能为空', trigger: 'blur' }
    488.         ]
    489.       }
    490.     }
    491.   },
    492.   beforeDestroy() {
    493.     const editor = this.editorItem.editor
    494.     if (editor == null) return
    495.     editor.destroy() // 组件销毁时，及时销毁编辑器
    496.   },
    497.   mounted() {
    498.   },
    499.   created() {
    500.     const query = this.$route.query
    501.     this.routeQueryParms = query
    502.     this.getList()
    503.   },
    504.   methods: {
    505.     isShowTypeChange(row) {
    506.       this.$modal.confirm('是否' + (row.picShow == '0' ? '展示' : '隐藏') + '标题为"' + row.picNm + '"的数据项？').then(function() {
    507.         return picShowUpdate({ id: row.id, picShow: row.picShow })
    508.       }).then(() => {
    509.         this.getList()
    510.         this.$modal.msgSuccess('操作成功！')
    511.       }).catch(function() {
    512.         // 00 隐藏，01不隐藏
    513.         row.picShow = (row.picShow === '0' ? '1' : '0')
    514.       })
    515.     },
    516.     // 二维码方法
    517.     creatQrCode(url) {
    518.       this.$set(this.show, 'qrCode', true)
    519.       this.$nextTick(() => {
    520.         this.$refs.qrcode.innerHTML = ''
    521.         const qrcode = new QRCode(this.$refs.qrcode, {
    522.           text: url, // 需要转换为二维码的内容
    523.           width: 180,
    524.           height: 180,
    525.           colorDark: '#000000',
    526.           colorLight: '#ffffff',
    527.           correctLevel: QRCode.CorrectLevel.H
    528.         })
    529.       })
    530.     },
    531.  
    532.     onCreated(editor) {
    533.       this.editorItem.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    534.     },
    535.     // 覆盖默认的上传行为
    536.     requestUpload() {
    537.     },
    538.     beforeUpload(file) {
    539.       const isLt2M = file.size / 1024 / 1024 < 2
    540.       if (!isLt2M) {
    541.         this.$message.error('图片大小不能超过2MB!')
    542.         return
    543.       }
    544.       if (file.type.indexOf('image/') == -1) {
    545.         this.$modal.msgError('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。')
    546.       } else {
    547.         const reader = new FileReader()
    548.         reader.readAsDataURL(file)
    549.         reader.onload = () => {
    550.           // 这个是要上传的真实图片文件
    551.           this.form.picNmFile = file
    552.           // 此时图片是base64编码文件
    553.           this.form.picAddr = reader.result
    554.           this.$refs.form.validateField('picAddr')
    555.         }
    556.       }
    557.     },
    558.  
    559.     /** 查询广告轮播图列表 */
    560.     getList() {
    561.       this.loading = true
    562.       listLunbo(this.queryParams).then(response => {
    563.         this.lunboList = response.rows
    564.         this.total = response.total
    565.         this.loading = false
    566.       })
    567.     },
    568.     // 取消按钮
    569.     cancel() {
    570.       this.open = false
    571.       this.reset()
    572.     },
    573.     // 表单重置
    574.     reset() {
    575.       this.form = {
    576.         id: null,
    577.         picNm: null,
    578.         picAddr: null,  // 新增的时候是base64编码字节数据，但是只有在file不为空的时候才会提交
    579.         picDesc: null,
    580.         picShow: '0',
    581.         creater: null,
    582.         createDt: null,
    583.         modifier: null,
    584.         modifyDt: null,
    585.         remarks: null,
    586.         deleteFlag: null,
    587.         picHyperlink: null,
    588.         adType: null,
    589.         pageType: '1', // 默认外部网页链接
    590.         countdown: null,
    591.         savepic: null,
    592.         picNmFile: null, // 图片文件
    593.         richText: '', // 富文本
    594.         releaseTime: null,
    595.         lockTime: null
    596.       }
    597.       this.show = {
    598.         richText: false
    599.       }
    600.       this.resetForm('form')
    601.     },
    602.     /** 搜索按钮操作 */
    603.     handleQuery() {
    604.       this.queryParams.pageNum = 1
    605.       this.getList()
    606.     },
    607.     /** 重置按钮操作 */
    608.     resetQuery() {
    609.       this.resetForm('queryForm')
    610.       this.handleQuery()
    611.     },
    612.     // 多选框选中数据
    613.     handleSelectionChange(selection) {
    614.       this.ids = selection.map(item => item.id)
    615.       this.picNms = selection.map(item => item.picNm)
    616.       this.single = selection.length !== 1
    617.       this.multiple = !selection.length
    618.     },
    619.     /** 新增按钮操作 */
    620.     handleAdd() {
    621.       this.reset()
    622.       this.open = true
    623.       this.title = '添加广告轮播图'
    624.  
    625.       // 清除富文本内容
    626.       // if (this.editorItem.editor) {
    627.       //   this.editorItem.editor.clear();
    628.       //   this.editorItem.editor.setHtml('
      ')
    629.       // }
    630.  
    631.       this.nextItem.contentTitle = '{#标题#}'
    632.  
    633.       this.$set(this.form, 'richText',
    634.         '
      ' +
    635.         '' + this.nextItem.contentTitle  + '' +
    636.         ''+
    637.         '
      ' +
    638.         '运营  ' + getNowDate() + '' +
    639.         '
      '
    640.       )
    641.  
    642.     },
    643.  
    644.     // 更新富文本中的标题
    645.     updateRichHtml(val) {
    646.       // 富文本内容
    647.       let richText = this.form.richText
    648.       // 占位符
    649.       let contentTitle = this.nextItem.contentTitle
    650.  
    651.       // 如果不为初始值，那么就截取，真实值，方便替换富文本内容
    652.       if ('{#标题#}' !== contentTitle) {
    653.         contentTitle = contentTitle.replace('{#', '').replace('#}', '')
    654.       }
    655.  
    656.       // 将标题替换进内容中
    657.       const newHtml = richText.replace(contentTitle, val)
    658.       this.$set(this.form, 'richText', newHtml)
    659.       this.nextItem.contentTitle = '{#' + val + '#}'
    660.     },
    661.  
    662.     /** 修改按钮操作 */
    663.     handleUpdate(row) {
    664.       this.reset()
    665.       const id = row.id || this.ids
    666.       getLunbo(id).then(response => {
    667.         // 初始化发布时间
    668.         if (response.data.releaseTime) {
    669.           response.data.releaseTime = [response.data.releaseTime, response.data.lockTime]
    670.         }
    671.  
    672.         this.form = response.data
    673.         // 如果是本地连接则打开富文本编辑器,否则则关闭
    674.         this.show.richText = this.form.pageType === '0'
    675.  
    676.         // 写入富文本内容
    677.         this.$nextTick(() => {
    678.           if (this.editorItem.editor) {
    679.             this.editorItem.editor.clear()
    680.             this.editorItem.editor.setHtml(this.form.richText)
    681.           }
    682.         })
    683.  
    684.         this.open = true
    685.         this.title = '修改广告轮播图'
    686.       })
    687.     },
    688.     /** 提交按钮 */
    689.     submitForm() {
    690.       this.$refs['form'].validate(valid => {
    691.         let fd = new FormData()
    692.         fd.append('id', this.form.id ? this.form.id : '')
    693.         fd.append('picNm', this.form.picNm ? this.form.picNm : '')
    694.  
    695.         // 图片文件存在才去拼接
    696.         if (this.form.picNmFile) {
    697.           fd.append('picNmFile', this.form.picNmFile, this.form.picNmFile.name)
    698.         }
    699.  
    700.         fd.append('picHyperlink', this.form.picHyperlink ? this.form.picHyperlink : '')
    701.         fd.append('remarks', this.form.remarks ? this.form.remarks : '')
    702.         fd.append('picDesc', this.form.picDesc ? this.form.picDesc : '')
    703.         fd.append('picShow', this.form.picShow ? this.form.picShow : '')
    704.         fd.append('createDt', this.form.createDt ? this.form.createDt : '')
    705.         fd.append('modifyDt', this.form.modifyDt ? this.form.modifyDt : '')
    706.         fd.append('pageType', this.form.pageType ? this.form.pageType : '')
    707.         fd.append('richText', this.form.richText ? this.form.richText : '')
    708.  
    709.         // 发布时间
    710.         if (this.form.releaseTime) {
    711.           fd.append('lockTime', this.form.releaseTime ? this.form.releaseTime[1] : '')
    712.           fd.append('releaseTime', this.form.releaseTime ? this.form.releaseTime[0] : '')
    713.         }
    714.  
    715.         if (valid) {
    716.           if (this.form.id != null) {
    717.             updateLunbo(fd).then(response => {
    718.               this.$modal.msgSuccess('修改成功')
    719.               this.open = false
    720.               this.getList()
    721.             })
    722.           } else {
    723.             addLunbo(fd).then(response => {
    724.               this.$modal.msgSuccess('新增成功')
    725.               this.open = false
    726.               this.getList()
    727.             })
    728.           }
    729.         }
    730.  
    731.       })
    732.     },
    733.     /** 删除按钮操作 */
    734.     handleDelete(row) {
    735.       const ids = row.id || this.ids
    736.       const names = row.picNm || this.picNms
    737.  
    738.       this.$modal.confirm('是否删除广告图标题为"' + names + '"的数据项？').then(function() {
    739.         return delLunbo(ids)
    740.       }).then(() => {
    741.         this.getList()
    742.         this.$modal.msgSuccess('删除成功')
    743.       }).catch(() => {
    744.       })
    745.     },
    746.     /** 导出按钮操作 */
    747.     handleExport() {
    748.       const queryParams = this.queryParams
    749.       this.$modal.confirm('是否确认导出所有广告轮播图数据项？').then(() => {
    750.         this.exportLoading = true
    751.         return exportLunbo(queryParams)
    752.       }).then(response => {
    753.         this.$download.name(response.msg)
    754.         this.exportLoading = false
    755.       }).catch(() => {
    756.       })
    757.     }
    758.   }
    759. }
    760. script>
    761. <style scoped>
    762. /*src="@wangeditor/editor/dist/css/style.css"*/
    763. .avatar-uploader .el-upload {
    764.   border: 1px dashed #d9d9d9 !important;
    765.   border-radius: 6px !important;
    766.   cursor: pointer !important;
    767.   position: relative !important;
    768.   overflow: hidden !important;
    769. }
    770.  
    771. .avatar-uploader .el-upload:hover {
    772.   border-color: #409EFF !important;
    773. }
    774.  
    775. .avatar-uploader-icon {
    776.   font-size: 34px !important;
    777.   color: #8c939d !important;
    778.   width: 350px !important;
    779.   height: 180px !important;
    780.   line-height: 180px !important;
    781.   text-align: center !important;
    782.   border: 1px #d9d9d9 solid !important;
    783. }
    784.  
    785. .avatar {
    786.   /*width: 200px;*/
    787.   height: 180px !important;
    788.   /*display: block;*/
    789. }
    790.  
    791. .el-form-item--medium .el-form-item__content {
    792.   line-height: 0 !important;
    793. }
    794.  
    795. ::v-deep .toolbar_1 .title {
    796.   font-size: 10px;
    797.   margin: 0;
    798.   text-align: center;
    799. }
    800.  
    801. .toolbar_1 {
    802.   border-bottom: 1px solid #ccc;
    803. }
    804.  
    805.  
    806. /* switch按钮样式 */
    807. ::v-deep .switch .el-switch__label {
    808.   position: absolute;
    809.   display: none;
    810.   color: #fff !important;
    811. }
    812.  
    813. /*打开时文字位置设置*/
    814. ::v-deep .switch .el-switch__label--right {
    815.   z-index: 1;
    816. }
    817.  
    818. /* 调整打开时文字的显示位子 */
    819. ::v-deep .switch .el-switch__label--right span {
    820.   margin-right: 9px;
    821. }
    822.  
    823. /*关闭时文字位置设置*/
    824. ::v-deep .switch .el-switch__label--left {
    825.   z-index: 1;
    826. }
    827.  
    828. /* 调整关闭时文字的显示位子 */
    829. ::v-deep .switch .el-switch__label--left span {
    830.   margin-left: 9px;
    831. }
    832.  
    833. /*显示文字*/
    834. ::v-deep .switch .el-switch__label.is-active {
    835.   display: block;
    836. }
    837.  
    838. /* 调整按钮的宽度 */
    839. ::v-deep .switch.el-switch .el-switch__core,
    840. ::v-deep .el-switch .el-switch__label {
    841.   width: 70px !important;
    842.   margin: 0;
    843. }
    844. /*::v-deep .w-e-text-container .w-e-modal :first-child label:nth-of-type(3){*/
    845. /*  background-color: #00afff;*/
    846. /*  display: none;*/
    847. /*}*/
    848. ::v-deep  video{
    849.   max-width: 100%;
    850. }
    851. style>

    、

    第二步，补齐配置文件

    上述vue组件中使用到的wangEditor.js配置，请依据引入的路径创建本文件

    1. import { getToken } from '@/utils/auth'
    2. // import resize from "../views/dashboard/mixins/resize";
    3. import { uploadFileHce } from '../api/common'
    4. import { Message } from 'element-ui'
    5.  
    6. export default {
    7.   // menus: [
    8.   //   // "head",
    9.   //   'bold',
    10.   //   'fontSize',
    11.   //   "fontName",
    12.   //   'italic',
    13.   //   'underline',
    14.   //   '|',
    15.   //   'strikeThrough',
    16.   //   'indent',
    17.   //   'lineHeight',
    18.   //   'foreColor',
    19.   //   'backColor',
    20.   //   'link',
    21.   //   '|',
    22.   //   'list',
    23.   //   // "todo",
    24.   //   'image',
    25.   //   'justify',
    26.   //   'quote',
    27.   //   'table',
    28.   //   '|',
    29.   //   'code',
    30.   //   'splitLine',
    31.   //   'undo',
    32.   //   'emoticon',
    33.   //   'redo'
    34.   // ],
    35.   placeholder: '请输入内容...',
    36.   scroll: false,
    37.   // autoFocus:true,
    38.   MENU_CONF: {
    39.     // emotion:{
    40.     //   emotions: '😀 😃 😄 😁 😆 😅 😂 🤣 😊 😇 🙂 🙃 😉'.split(' ') // 数组
    41.     // }
    42.     // fontFamily: {
    43.     //   fontFamilyList: [
    44.     //     // 元素支持两种形式
    45.     //     //   1. 字符串；
    46.     //     //   2. { name: 'xxx', value: 'xxx' }
    47.     //
    48.     //     '黑体',
    49.     //     '楷体',
    50.     //     { name: '仿宋', value: '仿宋' },
    51.     //     'Arial',
    52.     //     'Tahoma',
    53.     //     'Verdana'
    54.     //   ]
    55.     // },
    56.     // 上传图片的配置
    57.     uploadImage: {
    58.  
    59.       server: process.env.VUE_APP_BASE_API + '/common/editorUpload/hce',
    60.  
    61.       // 字段名称
    62.       fieldName: 'file',
    63.  
    64.       // 单个文件的最大体积限制，默认为 2M
    65.       maxFileSize: 4 * 1024 * 1024, // 1M
    66.  
    67.       // 最多可上传几个文件，默认为 100
    68.       maxNumberOfFiles: 20,
    69.  
    70.       // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
    71.       allowedFileTypes: ['image/*'],
    72.  
    73.       base64LimitSize: 75 * 1024, // 100kb 以下插入 base64
    74.  
    75.       // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
    76.       meta: {
    77.         type: 'img'
    78.       },
    79.  
    80.       // 将 meta 拼接到 url 参数中，默认 false
    81.       metaWithUrl: false,
    82.  
    83.       // 自定义增加 http  header
    84.       headers: {
    85.         // Accept: 'text/x-json',
    86.         Authorization: 'Bearer ' + getToken()
    87.       },
    88.  
    89.       // 跨域是否传递 cookie ，默认为 false
    90.       withCredentials: false,
    91.  
    92.       // 超时时间，默认为 10 秒
    93.       timeout: 5 * 1000, // 5 秒
    94.  
    95.       onBeforeUpload(files) {
    96.         return files // 返回哪些文件可以上传
    97.         // return false 会阻止上传
    98.       },
    99.  
    100.       // 上传进度的回调函数
    101.       onProgress(progress) {
    102.         // console.log("onProgress", progress);
    103.       },
    104.       // 单个文件上传成功之后
    105.       onSuccess(file, res) {
    106.         Message({
    107.           message: '上传成功',
    108.           type: 'success'
    109.         })
    110.         // console.log("onSuccess", file, res);
    111.       },
    112.       // 单个文件上传失败
    113.       onFailed(file, res) {
    114.         Message({
    115.           message: res.msg ? res.msg : '文件上传失败，可能是网络原因',
    116.           type: 'error'
    117.         })
    118.         // console.log("onFailed", file, res);
    119.       },
    120.       // 上传错误，或者触发 timeout 超时
    121.       onError(file, err, res) {
    122.         Message({
    123.           message: res.msg ? res.msg : '文件上传时发送错误，可能是网络原因，请检查！',
    124.           type: 'error'
    125.         })
    126.       }
    127.  
    128.       // 用户自定义上传图片
    129.       // customUpload(file, insertFn) {
    130.       //   const data = new FormData();
    131.       //   data.append("file", file); // file 即选中的文件
    132.       //   // data.append("type", 'img'); // file
    133.       //
    134.       //   uploadFileHce(data).then(res => {
    135.       //     // 这个返回的是相对路径
    136.       //     let url = res.fileName;
    137.       //     // baseapi进行拼接
    138.       //     url = process.env.VUE_APP_BASE_API + url;
    139.       //     insertFn(url, '', res.fileName); //插入图片
    140.       //   })
    141.       // }
    142.  
    143.     },
    144.     // 上传视频的配置
    145.     uploadVideo: {
    146.       server: process.env.VUE_APP_BASE_API + '/common/editorUpload/hce',
    147.       fieldName: 'file',
    148.       // 单个文件的最大体积限制，默认为 10M, 现在是20M
    149.       maxFileSize: 200 * 1024 * 1024, // 5M
    150.       // 最多可上传几个文件，默认为 5
    151.       maxNumberOfFiles: 3,
    152.       // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
    153.       allowedFileTypes: ['video/*'],
    154.       //  将 meta 拼接到 url 参数中，默认 false
    155.       metaWithUrl: false,
    156.       meta: {
    157.         type: 'video'
    158.       },
    159.       // // 自定义增加 http  header
    160.       headers: {
    161.         Authorization: 'Bearer ' + getToken()
    162.       },
    163.       // // 跨域是否传递 cookie ，默认为 false
    164.       withCredentials: false,
    165.       // // 超时时间，默认为 30 秒
    166.       timeout: 21 * 1000, // 15 秒
    167.  
    168.       // 上传之前触发
    169.       onBeforeUpload(file) {
    170.         return file
    171.       },
    172.  
    173.       // 上传进度的回调函数
    174.       onProgress(progress) {
    175.         // console.log("onProgress", progress);
    176.       },
    177.       // 单个文件上传成功之后
    178.       onSuccess(file, res) {
    179.         Message({
    180.           message: '上传成功',
    181.           type: 'success'
    182.         })
    183.         // console.log("onSuccess", file, res);
    184.       },
    185.       // 单个文件上传失败
    186.       onFailed(file, res) {
    187.         Message({
    188.           message: res.msg ? res.msg : '文件上传失败，可能是网络原因',
    189.           type: 'error'
    190.         })
    191.         // console.log("onFailed", file, res);
    192.       },
    193.       // 上传错误，或者触发 timeout 超时
    194.       onError(file, err, res) {
    195.         Message({
    196.           message: res.msg ? res.msg : '文件上传时发送错误，可能是网络原因，请检查！',
    197.           type: 'error'
    198.         })
    199.       }
    200.  
    201.       // 用户自定义上传视频
    202.       // customUpload(file, insertFn) {
    203.       //   const data = new FormData();
    204.       //   data.append("file", file); // file 即选中的文件
    205.       //   data.append("type", 'video'); // file 即选中的文件
    206.       //
    207.       //   uploadFileHce(data).then(res => {
    208.       //     // 这个返回的是相对路径
    209.       //     let url = res.fileName;
    210.       //     // baseapi进行拼接
    211.       //     url = process.env.VUE_APP_BASE_API + url;
    212.       //     insertFn(url, '', res.fileName); //插入图片
    213.       //   })
    214.       // }
    215.  
    216.     }
    217.  
    218.   }
    219. }

    第三步，创建公共配置elementuiConf.js，依据vue引入路径创建

    1. // elementui配置
    2. // 日期选择配置
    3. import QRCode from "qrcodejs2";
    4.  
    5. export const pickerOptions = {
    6.   shortcuts: [{
    7.     text: '未来一周',
    8.     onClick(picker) {
    9.       let start = getNowDate_01();
    10.       let end = getNowDate_01();
    11.  
    12.       end.setTime(end.getTime() + 3600 * 1000 * 24 * 7);
    13.       picker.$emit('pick', [start, end]);
    14.     }
    15.   }, {
    16.     text: '未来一个月',
    17.     onClick(picker) {
    18.       let start = getNowDate_01();
    19.       let end = getNowDate_01();
    20.       end.setTime(end.getTime() + 3600 * 1000 * 24 * 30);
    21.       picker.$emit('pick', [start, end]);
    22.     }
    23.   }, {
    24.     text: '未来三个月',
    25.     onClick(picker) {
    26.       let start = getNowDate_01();
    27.       let end = getNowDate_01();
    28.       end.setTime(end.getTime() + 3600 * 1000 * 24 * 90);
    29.       picker.$emit('pick', [start, end]);
    30.     }
    31.   }, {
    32.     text: '未来半年',
    33.     onClick(picker) {
    34.       let start = getNowDate_01();
    35.       let end = getNowDate_01();
    36.       end.setTime(end.getTime() + 3600 * 1000 * 24 * 180);
    37.       picker.$emit('pick', [start, end]);
    38.     }
    39.   }, {
    40.     text: '未来一年',
    41.     onClick(picker) {
    42.       let start = getNowDate_01();
    43.       let end = getNowDate_01();
    44.       end.setTime(end.getTime() + 3600 * 1000 * 24 * 365);
    45.       picker.$emit('pick', [start, end]);
    46.     }
    47.   }, {
    48.     text: '未来两年',
    49.     onClick(picker) {
    50.       let start = getNowDate_01();
    51.       let end = getNowDate_01();
    52.       end.setTime(end.getTime() + 3600 * 1000 * 24 * 365 * 2);
    53.       picker.$emit('pick', [start, end]);
    54.     }
    55.   }, {
    56.     text: '未来五年',
    57.     onClick(picker) {
    58.       let start = getNowDate_01();
    59.       let end = getNowDate_01();
    60.       end.setTime(end.getTime() + 3600 * 1000 * 24 * 365 * 5);
    61.       picker.$emit('pick', [start, end]);
    62.     }
    63.   }],
    64.  
    65.   //禁用当前日期之前的日期
    66.   // disabledDate(time) {
    67.   //   //Date.now()是javascript中的内置函数，它返回自1970年1月1日00:00:00 UTC以来经过的毫秒数。
    68.   //   return time.getTime() < Date.now() - 8.64e7;
    69.   // }
    70. }
    71.  
    72. // 打开网页预览
    73. export function openIframe(url, show, urlItem) {
    74.   // 判断是否需要打开新的ifrema还是在本页面打开
    75.   if ((url.indexOf("app.urumqimtr.com") > -1) || (url.indexOf("localhost:") > -1)) {
    76.     show.html = true;
    77.     urlItem.htmlUrl = url;
    78.   } else {
    79.     window.open(url);
    80.   }
    81. }
    82.  
    83. // 获取图片地址，有的图片是网络图片。有的图片是本地图片，尽量都能展示
    84. export function imgUrlDeal(url) {
    85.   if (url) {
    86.     // 以/为开头说明是本地服务器图片
    87.     if (url.startsWith("/")) {
    88.       return process.env.VUE_APP_BASE_API + url
    89.     }
    90.     return url;
    91.   } else {
    92.     return null;
    93.   }
    94.  
    95. }
    96.  
    97. // 格式化日年月日
    98. export function getNowDate_01() {
    99.   let date = new Date();
    100.   let year = date.getFullYear() // 年
    101.   let month = date.getMonth() + 1; // 月
    102.   let day = date.getDate(); // 日
    103.  
    104.   // 给一位数的数据前面加 “0”
    105.   if (month >= 1 && month <= 9) {
    106.     month = "0" + month;
    107.   }
    108.   if (day >= 0 && day <= 9) {
    109.     day = "0" + day;
    110.   }
    111.  
    112.   let time = year + "-" + month + "-" + day;
    113.   time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm),'');
    114.   date = new Date(time);
    115.   return date;
    116. }
    117.  
    118. // 格式化日对象
    119. export function getNowDate() {
    120.   let date = new Date();
    121.   let sign2 = ":";
    122.   let year = date.getFullYear() // 年
    123.   let month = date.getMonth() + 1; // 月
    124.   let day = date.getDate(); // 日
    125.   let hour = date.getHours(); // 时
    126.   let minutes = date.getMinutes(); // 分
    127.   let seconds = date.getSeconds() //秒
    128.   const weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
    129.   const week = weekArr[date.getDay()];
    130.   // 给一位数的数据前面加 “0”
    131.   if (month >= 1 && month <= 9) {
    132.     month = "0" + month;
    133.   }
    134.   if (day >= 0 && day <= 9) {
    135.     day = "0" + day;
    136.   }
    137.   if (hour >= 0 && hour <= 9) {
    138.     hour = "0" + hour;
    139.   }
    140.   if (minutes >= 0 && minutes <= 9) {
    141.     minutes = "0" + minutes;
    142.   }
    143.   if (seconds >= 0 && seconds <= 9) {
    144.     seconds = "0" + seconds;
    145.   }
    146.  
    147.   return year + "-" + month + "-" + day + " " + hour + sign2 + minutes + sign2 + seconds;
    148. }

    后台代码

    先创建模板文件

    1. <html lang="zh-CN">
    2.  
    3. <head>
    4.     <meta content="text/html; charset=utf-8" http-equiv="content-type">
    5.     <meta name="referrer" content="never">
    6.     <meta name="viewport"
    7.           content="width=device-width, initial-scale=1,   minimum-scale=1,   maximum-scale=1,user-scalable=no">
    8.  
    9.     <style>
    10.         html, body {
    11.             padding: 0;
    12.             margin: 0;
    13.         }
    14.  
    15.         * {
    16.             word-break:break-all;
    17.         }
    18.  
    19.         #content {
    20.             width: 92.2%;
    21.             /*height: 100%;*/
    22.             padding: 0;
    23.             margin: 5px auto 0;
    24.         }
    25.  
    26.         /* table 样式 */
    27.         table {
    28.             border-top: 1px solid #ccc;
    29.             border-left: 1px solid #ccc;
    30.         }
    31.  
    32.         table td,
    33.         table th {
    34.             border-bottom: 1px solid #ccc;
    35.             border-right: 1px solid #ccc;
    36.             padding: 3px 5px;
    37.         }
    38.  
    39.         table th {
    40.             border-bottom: 2px solid #ccc;
    41.             text-align: center;
    42.         }
    43.  
    44.         /* ul ol 样式 */
    45.         ul, ol {
    46.             margin: 10px 0 10px 20px;
    47.         }
    48.  
    49.         /* video 设置*/
    50.         video {
    51.             width: 100%;
    52.             height: auto;
    53.         }
    54.     style>
    55.  
    56.     <title>${title}title>
    57. head>
    58. <body>
    59. <div id="content">
    60.     <#--   <h1 style="margin: 10px 0px 0px; padding: 0px; text-align: center; color: rgb(0, 0, 0); line-height: 30px; font-size: 21px; font-weight: normal; white-space: normal;">-->
    61.     <#--       -->
    62.     <#--   h1>-->
    63.     <#--   <p style="text-align: center;"><span style="text-align: center; color: rgb(102, 102, 102); font-family: Courier New, Courier, monospace; font-size: 12px; white-space: normal;">2022-07-22span>p>-->
    64.  
    65.     <#-- 富文本中的内容     -->
    66.     ${content}
    67. div>
    68. <script>
    69.  
    70.     window.onload = function () {
    71.         //视频：
    72.         let videos = document.getElementsByTagName('video');
    73.         videos = Array.from(videos);
    74.         videos.forEach((video) => {
    75.             video.setAttribute("controls", "controls");
    76.             video.setAttribute("controlslist", "nodownload");
    77.         });
    78.  
    79.         // let imgs = document.getElementsByTagName('img');
    80.         // imgs = Array.from(imgs);
    81.         // imgs.forEach((img) => {
    82.             // console.log(img)
    83.             // img.style.width = '100%';
    84.             // img.style.maxWidth = '100%';
    85.             // img.style.height = 'auto';
    86.         // });
    87.  
    88.     }
    89.     // document.getElementsByTagName()
    90.  
    91.  
    92. script>
    93.  
    94. body>
    95. html>

    这些配置是必要的，如果使用的是ruoyi那么请自行修改

    1. # 项目相关配置
    2. myWeb:
    3.   # 名称
    4.   name: myWeb
    5.   # 版本
    6.   version: 0.0.1
    7.   # 版权年份
    8.   copyrightYear: 2021
    9.   # 实例演示开关
    10.   demoEnabled: false
    11.   # 文件路径 示例（ Windows配置D:/myWeb/uploadPath，Linux配置 /home/myWeb/uploadPath）
    12.   profile: ./uploadfile
    13. #  profile: D:/home/file
    14.   # 获取ip地址开关
    15.   addressEnabled: false
    16.   # 验证码类型 math 数组计算 char 字符验证
    17.   captchaType: char
    18.   # 共享盘映射地址,示例（ Windows配置D:/myWeb/uploadPath，Linux配置 /home/myWeb/uploadPath）
    19. #  sharedDisk: /HceShare/hceapp
    20.   sharedDisk: D:/HceShare/hceapp
    21.   # 上传的文件大小 140MB
    22.   fileMaxSize: 146800640
    23.  
    24.  
    25. # 静态资源对应的服务器域名或地址
    26. # 生产地址
    27. #serverPrefix: https://xxxxxxx:9969/RecordFile
    28. # 测试环境地址
    29. #serverPrefix: http://xxxxxxx:8043/ggpt
    30. # 本地
    31. serverPrefix: http://localhost:8043/ggpt

    接下来最重要的地方，就是后台对富文本地址的处理，这个是控制器

    1.     @Value("${serverPrefix}")
    2.     public String serverPrefix;
    3.  
    4.     @RepeatSubmit(interval = 3500)
    5.     public AjaxResult add(OpeNewsInfo opeNewsInfo) throws IOException, TemplateException, ParseException {
    6.  
    7.  
    8.         LoginUser loginUser = getLoginUser();
    9.         // 上传到共享盘，成功后会返回路径,调用的是otherAddressesUpload()
    10.         String picaddr = FileUploadUtils.upload(myWeb.getSharedDiskImgPash(), myWeb.getSharedDisk(), opeNewsInfo.getPicNmFile());
    11.  
    12.  
    13.         // 如果是本地页面才会生成页面
    14.         if ("0".equals(opeNewsInfo.getPageType()) ) {
    15.             // 获取内容
    16.             String htmlAddress = FreemarkBeanUtil.getHtmlAddress(opeNewsInfo.getNewsTitle(), opeNewsInfo.getNewsContent(), loginUser);
    17.             opeNewsInfo.setNewsLinkAddress(StringUtils.isNotEmpty(htmlAddress) ? serverPrefix + htmlAddress : "");
    18.         }
    19.  
    20. 插入数据库。。。。。
    21. }

    接下来必要的工具里类FileUploadUtils

    1. package com.goldsign.common.utils.file;
    2.  
    3. import java.io.*;
    4. import java.lang.reflect.Method;
    5. import java.nio.charset.StandardCharsets;
    6. import java.util.Map;
    7.  
    8. import cn.hutool.core.util.ByteUtil;
    9. import cn.hutool.core.util.URLUtil;
    10. import com.goldsign.common.utils.ServletUtils;
    11. import com.goldsign.common.utils.VideoUtil;
    12. import com.goldsign.common.utils.ip.IpUtils;
    13. import org.apache.commons.compress.utils.IOUtils;
    14. import org.apache.commons.fileupload.FileItem;
    15. import org.apache.commons.fileupload.disk.DiskFileItem;
    16. import org.apache.commons.fileupload.disk.DiskFileItemFactory;
    17. import org.apache.commons.io.FilenameUtils;
    18. import org.apache.http.entity.ContentType;
    19. import org.jsoup.nodes.Element;
    20. import org.jsoup.select.Elements;
    21. import org.slf4j.Logger;
    22. import org.slf4j.LoggerFactory;
    23. import org.springframework.beans.factory.annotation.Autowired;
    24. import org.springframework.beans.factory.annotation.Value;
    25. import org.springframework.http.MediaType;
    26. import org.springframework.mock.web.MockMultipartFile;
    27. import org.springframework.stereotype.Component;
    28. import org.springframework.web.multipart.MultipartFile;
    29. import com.goldsign.common.config.GoldSignConfig;
    30. import com.goldsign.common.constant.Constants;
    31. import com.goldsign.common.exception.file.FileNameLengthLimitExceededException;
    32. import com.goldsign.common.exception.file.FileSizeLimitExceededException;
    33. import com.goldsign.common.exception.file.InvalidExtensionException;
    34. import com.goldsign.common.utils.DateUtils;
    35. import com.goldsign.common.utils.StringUtils;
    36. import com.goldsign.common.utils.uuid.IdUtils;
    37. import org.jsoup.Jsoup;
    38. import org.jsoup.nodes.Document;
    39. import org.springframework.web.multipart.commons.CommonsMultipartFile;
    40.  
    41. import javax.annotation.PostConstruct;
    42. import javax.servlet.http.HttpServletRequest;
    43.  
    44. /**
    45.  * 文件上传工具类
    46.  *
    47.  * @author ruoyi
    48.  */
    49. @Component
    50. public class FileUploadUtils {
    51.  
    52.     protected static final Logger log = LoggerFactory.getLogger(FileUploadUtils.class);
    53.  
    54.     @Autowired
    55.     static IpUtils ipUtils;
    56.  
    57.     @Value("${serverPrefix}")
    58.     public String serverPrefix;
    59.  
    60.     public static String serve_prefix;
    61.  
    62.     //利用@PostConstruct将yml中配置的值赋给本地的变量
    63.     @PostConstruct
    64.     public void getEnvironment() {
    65.         this.serve_prefix = this.serverPrefix;
    66.     }
    67.  
    68.     /**
    69.      * 默认的文件名最大长度 100
    70.      */
    71.     public static final int DEFAULT_FILE_NAME_LENGTH = 350;
    72.  
    73.     /**
    74.      * 默认上传的地址
    75.      */
    76.     private static String defaultBaseDir = GoldSignConfig.getProfile();
    77.  
    78.     public static void setDefaultBaseDir(String defaultBaseDir) {
    79.         FileUploadUtils.defaultBaseDir = defaultBaseDir;
    80.     }
    81.  
    82.     public static String getDefaultBaseDir() {
    83.         return defaultBaseDir;
    84.     }
    85.  
    86.     /**
    87.      * 以默认配置进行文件上传
    88.      *
    89.      * @param file 上传的文件
    90.      * @return 文件名称
    91.      * @throws Exception
    92.      */
    93.     public static final String upload(MultipartFile file) throws IOException {
    94.         try {
    95.             return upload(getDefaultBaseDir(), null, file, MimeTypeUtils.DEFAULT_ALLOWED_EXTENSION);
    96.         } catch (Exception e) {
    97.             throw new IOException(e.getMessage(), e);
    98.         }
    99.     }
    100.  
    101.     /**
    102.      * 根据文件路径上传
    103.      *
    104.      * @param baseDir         相对应用的基目录
    105.      * @param fileHttpMapping 文件所存在的映射根目录，该目录被资源拦截器映射成了本服务的的静态资源
    106.      * @param file            上传的文件
    107.      * @return 文件名称
    108.      * @throws IOException
    109.      */
    110.     public static final String upload(String baseDir, String fileHttpMapping, MultipartFile file) throws IOException {
    111.         try {
    112.             return upload(baseDir, fileHttpMapping, file, MimeTypeUtils.DEFAULT_ALLOWED_EXTENSION);
    113.         } catch (Exception e) {
    114.             throw new IOException(e.getMessage(), e);
    115.         }
    116.     }
    117.  
    118.  
    119.     /**
    120.      * 文件上传
    121.      *
    122.      * @param baseDir          相对应用的基目录
    123.      * @param fileHttpMapping  文件所存在的映射根目录，该目录被资源拦截器映射成了本服务的的静态资源
    124.      * @param file             上传的文件
    125.      * @param allowedExtension 上传文件类型
    126.      * @return 返回上传成功的文件名
    127.      * @throws FileSizeLimitExceededException       如果超出最大大小
    128.      * @throws FileNameLengthLimitExceededException 文件名太长
    129.      * @throws IOException                          比如读写文件出错时
    130.      * @throws InvalidExtensionException            文件校验异常
    131.      */
    132.     public static final String upload(String baseDir, String fileHttpMapping, MultipartFile file, String[] allowedExtension) throws Exception {
    133.  
    134.         int fileNamelength = file.getOriginalFilename().length();
    135.         if (fileNamelength > FileUploadUtils.DEFAULT_FILE_NAME_LENGTH) {
    136.             throw new FileNameLengthLimitExceededException(FileUploadUtils.DEFAULT_FILE_NAME_LENGTH);
    137.         }
    138.  
    139.         assertAllowed(file, allowedExtension);
    140.         String fileName = extractFilename(file);
    141.  
    142.         File desc = getAbsoluteFile(baseDir, fileName);
    143.         file.transferTo(desc);
    144.         String pathFileName = getPathFileName(baseDir, fileHttpMapping, fileName);
    145.         return pathFileName;
    146.     }
    147.  
    148.     /**
    149.      * 编码文件名
    150.      */
    151.     public static final String extractFilename(MultipartFile file) {
    152.         String fileName = file.getOriginalFilename();
    153.         String extension = getExtension(file);
    154.         fileName = DateUtils.datePath() + "/" + IdUtils.fastUUID() + "." + extension;
    155.         return fileName;
    156.     }
    157.  
    158.     public static final File getAbsoluteFile(String uploadDir, String fileName) throws IOException {
    159.         File desc = new File(uploadDir + File.separator + fileName);
    160.  
    161.         if (!desc.exists()) {
    162.             if (!desc.getParentFile().exists()) {
    163.                 desc.getParentFile().mkdirs();
    164.             }
    165.         }
    166.         return desc;
    167.     }
    168.  
    169.     public static final String getPathFileName(String uploadDir, String fileHttpMapping, String fileName) throws IOException {
    170.         if (fileHttpMapping == null) {
    171.             fileHttpMapping = GoldSignConfig.getProfile();
    172.         }
    173.         String pathFileName;
    174.         int dirLastIndex = fileHttpMapping.length() + 1;
    175.         String currentDir = StringUtils.substring(uploadDir, dirLastIndex);
    176.         // 如果是本服務對應的文件夾，那麽就加上指定前綴，可以让该请求访问本服务时，映射到指定的静态资源上
    177.         if (fileHttpMapping.equals(GoldSignConfig.getProfile())) {
    178.             // Constants.RESOURCE_PREFIX 是本服务默认的开头前缀
    179.             pathFileName = Constants.RESOURCE_PREFIX + "/" + currentDir + "/" + fileName;
    180.         } else {
    181.             // 这个就不用加前缀， 因为其他服务(hce后管)也要访问，所以我们文件路径的格式不能和框架指定的格式保持一致，要跟hce后管的文件系统保持一致，而且上传的时候我们也指定了前缀，如果要加新的文件类型，则在配置文件中增加配置，同时在ResourcesConfig中增加对该目录的映射处理
    182.             pathFileName = "/" + currentDir + "/" + fileName;
    183.         }
    184.         return pathFileName;
    185.     }
    186.  
    187.     /**
    188.      * 文件大小校验
    189.      *
    190.      * @param file 上传的文件
    191.      * @return
    192.      * @throws FileSizeLimitExceededException 如果超出最大大小
    193.      * @throws InvalidExtensionException
    194.      */
    195.     public static final void assertAllowed(MultipartFile file, String[] allowedExtension) throws FileSizeLimitExceededException, InvalidExtensionException {
    196.         long size = file.getSize();
    197.  
    198.         long fileMaxSize = GoldSignConfig.getFileMaxSize();
    199.         if (fileMaxSize != -1 && size > fileMaxSize) {
    200.             throw new FileSizeLimitExceededException(fileMaxSize / 1024 / 1024);
    201.         }
    202.  
    203.         String fileName = file.getOriginalFilename();
    204.         String extension = getExtension(file);
    205.         if (allowedExtension != null && !isAllowedExtension(extension, allowedExtension)) {
    206.             if (allowedExtension == MimeTypeUtils.IMAGE_EXTENSION) {
    207.                 throw new InvalidExtensionException.InvalidImageExtensionException(allowedExtension, extension,
    208.                         fileName);
    209.             } else if (allowedExtension == MimeTypeUtils.FLASH_EXTENSION) {
    210.                 throw new InvalidExtensionException.InvalidFlashExtensionException(allowedExtension, extension,
    211.                         fileName);
    212.             } else if (allowedExtension == MimeTypeUtils.MEDIA_EXTENSION) {
    213.                 throw new InvalidExtensionException.InvalidMediaExtensionException(allowedExtension, extension,
    214.                         fileName);
    215.             } else if (allowedExtension == MimeTypeUtils.VIDEO_EXTENSION) {
    216.                 throw new InvalidExtensionException.InvalidVideoExtensionException(allowedExtension, extension,
    217.                         fileName);
    218.             } else {
    219.                 throw new InvalidExtensionException(allowedExtension, extension, fileName);
    220.             }
    221.         }
    222.  
    223.     }
    224.  
    225.     /**
    226.      * 判断MIME类型是否是允许的MIME类型
    227.      *
    228.      * @param extension
    229.      * @param allowedExtension
    230.      * @return
    231.      */
    232.     public static final boolean isAllowedExtension(String extension, String[] allowedExtension) {
    233.         for (String str : allowedExtension) {
    234.             if (str.equalsIgnoreCase(extension)) {
    235.                 return true;
    236.             }
    237.         }
    238.         return false;
    239.     }
    240.  
    241.     // 根据网页内容生成h5文件
    242.     public static String getH5Path(String h5Path, String content) throws IOException {
    243.         InputStream inputStream = null;
    244.         try {
    245.  
    246.             inputStream = new ByteArrayInputStream(content.getBytes());
    247.             MultipartFile vFile = new MockMultipartFile("xx.html", "xx.html", ContentType.TEXT_HTML.toString(), inputStream);
    248.  
    249.             // 保存新闻，这里获取的是h5
    250.             h5Path = upload(GoldSignConfig.getSharedDiskH5Pash(), GoldSignConfig.getSharedDisk(), vFile);
    251.         } catch (IOException e) {
    252.             e.printStackTrace();
    253.             log.error("网页生成上传失败，网页URL：{}，异常：{}", h5Path, e.getMessage());
    254.         } finally {
    255.             if (inputStream != null) {
    256.                 inputStream.close();
    257.             }
    258.         }
    259.         return h5Path;
    260.     }
    261.  
    262.     /**
    263.      * 获取文件名的后缀
    264.      *
    265.      * @param file 表单文件
    266.      * @return 后缀名
    267.      */
    268.     public static final String getExtension(MultipartFile file) {
    269.         String extension = FilenameUtils.getExtension(file.getOriginalFilename());
    270.         if (StringUtils.isEmpty(extension)) {
    271.             extension = MimeTypeUtils.getExtension(file.getContentType());
    272.         }
    273.         return extension;
    274.     }
    275.  
    276.     /**
    277.      * 将相对服务的相对路径，修改为相对为本文件的路径，避免服务地址修改的时候，或者服务名修改的时候产生不必要的维护
    278.      *
    279.      * @param els
    280.      */
    281.     public static void extracted(Elements els) throws IOException {
    282.         String src;
    283.         for (Element el : els) {
    284.  
    285.  
    286.             if ("video".equals(el.tag().getName())) {
    287.                 Elements source = el.select("source[src]");
    288.                 src = source.attr("src");
    289.                 if (StringUtils.isNotBlank(src)) {
    290.                     // 第一步，判断是否是绝对路径
    291.                     if (!isAbsolutePath(src)) {
    292.                         // 相对路径设置
    293.                         el.attr("src", getHtmlTagRelativeUrl(src));
    294.                     }
    295.  
    296.                     // 第二步，先不修改src的地址为相对地址，先获取视频封面字节数据
    297.                     byte[] bytesImg = VideoUtil.getScreenshot(src);
    298.                     if (bytesImg != null) {
    299.                         MultipartFile vFile = null;
    300.                         InputStream inputStream = null;
    301.                         try {
    302.                             // 构造inputStream
    303.                             inputStream = new ByteArrayInputStream(bytesImg);
    304.                             // 将inputStream转成MultipartFile
    305.                             vFile = new MockMultipartFile("xx.jpeg", "xx.jpeg", ContentType.IMAGE_JPEG.toString(), inputStream);
    306.                             // 上传封面。获取上传后的地址
    307.                             String h5Path = upload(GoldSignConfig.getSharedDiskCVideoCoverPath(), GoldSignConfig.getSharedDisk(), vFile);
    308.                             el.attr("poster", getHtmlTagRelativeUrl(h5Path));
    309.                         } catch (IOException e) {
    310.                             e.printStackTrace();
    311.                             log.error("视频封面转换失败，视频URL：{}，异常：{}", src, e.getMessage());
    312.                         } finally {
    313.                             if (inputStream != null) {
    314.                                 inputStream.close();
    315.                             }
    316.                         }
    317.                     }
    318.                 }
    319.             } else {
    320.                 src = el.attr("src");
    321.                 el.attr("src", getHtmlTagRelativeUrl(src));
    322.                 String style = el.attr("style");
    323.                 el.attr("style", "max-width: 100%;height: auto");
    324.             }
    325.         }
    326.     }
    327.  
    328.     /**
    329.      * 为标签设置图片，修改相对路径
    330.      *
    331.      * @param src
    332.      */
    333.     private static String getHtmlTagRelativeUrl(String src) {
    334.         // 判断如果有 配置文件中的serverPrefix地址，那么就替换成空字符串,这样在生成的文件中保存的就是相对地址了，相对地址不依赖域名，更灵活
    335.         src = src.replace(serve_prefix, "");
    336.         // 如果是以userfile开头的就替换
    337.         if (src.startsWith("/userfiles/ggpt/")) {
    338.             // 这里替换成相对路径，避免不必要的拼接数据，造成元数据污染
    339.             return src.replace("/userfiles/ggpt/", "../../../../");
    340.         }
    341.         return src;
    342.     }
    343.  
    344.     /**
    345.      * 将字符串通过outputStream输入到file中
    346.      * 这个方法有问题，会在本地生成文件，所以放弃使用了
    347.      *
    348.      * @param title
    349.      * @param htmlText
    350.      * @return
    351.      * @throws IOException
    352.      */
    353.     public static CommonsMultipartFile getCommonsMultipartFile(String title, String htmlText, File file) throws IOException {
    354.         // file为空就使用htmlcontent，否则就使用传递进来的file
    355.         if (file == null) {
    356.             file = new File(title + ".html");
    357.             OutputStream fos = new FileOutputStream(file);
    358.             fos.write(htmlText.getBytes(StandardCharsets.UTF_8));
    359.             try {
    360.                 fos.flush();
    361.                 fos.close();
    362.             } catch (IOException e) {
    363.  
    364.             }
    365.         }
    366.  
    367.         DiskFileItem fileItem = (DiskFileItem) new DiskFileItemFactory().createItem("file", MediaType.ALL_VALUE, true, file.getName());
    368.  
    369.  
    370.         try (InputStream input = new FileInputStream(file); OutputStream os = fileItem.getOutputStream()) {
    371.             IOUtils.copy(input, os);
    372.         } catch (Exception e) {
    373.             throw new IllegalArgumentException("Invalid file: " + e, e);
    374.         }
    375.  
    376.         CommonsMultipartFile multipartFile = new CommonsMultipartFile(fileItem);
    377.         return multipartFile;
    378.     }
    379.  
    380.     /**
    381.      * 判断是否绝对路径
    382.      * 当路径以 / 开头则为相对路径，否则视为绝对路径
    383.      *
    384.      * @param uploadDir
    385.      * @return
    386.      */
    387.     private static boolean isAbsolutePath(String uploadDir) {
    388.         if (uploadDir.startsWith("/")) {
    389.             return false;
    390.         }
    391.         return true;
    392.     }
    393.  
    394.     /**
    395.      * 获取本机地址
    396.      *
    397.      * @return
    398.      */
    399.     public static String getUrl() {
    400.         return getDomain(ServletUtils.getRequest());
    401.     }
    402.  
    403.     public static String getDomain(HttpServletRequest request) {
    404.         StringBuffer url = request.getRequestURL();
    405.         String contextPath = request.getServletContext().getContextPath();
    406.         return url.delete(url.length() - request.getRequestURI().length(), url.length()).append(contextPath).toString();
    407.     }
    408.  
    409. }

    视频封面截取工具VideoUtil

    1. package com.goldsign.common.utils;
    2.  
    3. import cn.hutool.core.img.ImgUtil;
    4. import com.goldsign.common.exception.ServiceException;
    5. import com.goldsign.common.utils.ip.IpUtils;
    6. import com.goldsign.common.utils.uuid.IdUtils;
    7. //import org.bytedeco.javacpp.opencv_core;
    8. //import org.bytedeco.javacv.FFmpegFrameGrabber;
    9. //import org.bytedeco.javacv.Frame;
    10. //import org.bytedeco.javacv.Java2DFrameConverter;
    11.  
    12. //import java.awt.*;
    13. //import java.awt.image.BufferedImage;
    14. import java.awt.*;
    15. import java.awt.image.BufferedImage;
    16. import java.io.ByteArrayOutputStream;
    17. import java.io.File;
    18. import java.io.IOException;
    19. //import java.io.File;
    20. //
    21. import org.bytedeco.javacpp.opencv_core;
    22. import org.bytedeco.javacv.*;
    23. import org.bytedeco.javacv.Frame;
    24. import org.slf4j.Logger;
    25. import org.slf4j.LoggerFactory;
    26. import org.springframework.beans.factory.annotation.Autowired;
    27. import org.springframework.beans.factory.annotation.Value;
    28. import org.springframework.stereotype.Component;
    29.  
    30. import javax.annotation.PostConstruct;
    31. import javax.imageio.ImageIO;
    32.  
    33. /**
    34.  * @author:yuchen
    35.  * @createTime:2022/7/11 16:07
    36.  */
    37. @Component
    38. public class VideoUtil {
    39.  
    40.     protected static final Logger log = LoggerFactory.getLogger(VideoUtil.class);
    41.  
    42.     public static void main(String[] args) {
    43.  
    44.  
    45. //        byte[] screenshot = getScreenshot("C:\\Users\\86181\\Downloads\\下载 (1).mp4");
    46.  
    47.  
    48. //        System.out.println(file.getName());
    49.  
    50. //        getVideoPic();
    51.     }
    52.  
    53.     @Autowired
    54.     public IpUtils ipUtils;
    55.  
    56.     @Autowired
    57.     public static IpUtils _ipUtils;
    58.  
    59.     @Value("${serverPrefix}")
    60.     public String serverPrefix;
    61.  
    62.     public static String serve_prefix;
    63.  
    64.     //利用@PostConstruct将yml中配置的值赋给本地的变量
    65.     @PostConstruct
    66.     public void getEnvironment(){
    67.         this.serve_prefix = this.serverPrefix;
    68.         this._ipUtils = this.ipUtils;
    69.     }
    70.  
    71. //    public static String getVideoPic() {
    72. //        String url = "https://xxx/xxxx.mp4";
    73. //        String value = "1111123";
    74. //        String dir = value +"/";
    75. //        String fileName = FileUtil.getName(url);// 100.mp4
    76. //        String targetFileName = "thumb_"+fileName.substring(0, fileName.lastIndexOf("."))+".jpg";
    77. //        File filePath = new File(PATH+dir);
    78. //        if (!filePath.exists()) {
    79. //            boolean mkdirs = filePath.mkdirs();
    80. //            if(mkdirs){
    81. //                log.info("文件夹创建成功：{}",filePath.getAbsolutePath());
    82. //            }
    83. //        }
    84. //        String outPath = PATH+dir+targetFileName;
    85. //        File outFile = getScreenshot(url, outPath);
    86. //        if(outFile != null){
    87. //            String fileName1 = AwsFileUtil.uploadS3Us(outFile, imei, targetFileName);
    88. //            System.out.println(fileName1);
    89. //            boolean delete = outFile.delete();
    90. //            if(delete){
    91. //                log.info("删除本地临时文件成功");
    92. //            }
    93. //            return fileName1;
    94. //        }
    95. //        return "";
    96. //    }
    97.  
    98.     /**
    99.      * 获取视频封面图
    100.      *
    101.      * @param filePath 视频地址
    102.      * @return map
    103.      */
    104. //    public static byte[] getScreenshot(String filePath) {
    105. //        log.info("截取视频截图开始：Video={}", filePath);
    106. //        filePath = filePath.replaceAll("\\\\", "/");
    107. //        File file = null;
    108. //        FFmpegFrameGrabber grabber = null;
    109. //        try {
    110. //            grabber = FFmpegFrameGrabber.createDefault(filePath);
    111. //            grabber.setOption("stimeout", "2000000");
    112. //            grabber.start();
    113. //            //设置视频截取帧（建议从5帧开始，防止全是黑屏）
    114. //            Frame frame = null;
    115. //            for (int j = 0; j < 5; j++) {
    116. //                frame = grabber.grabImage();
    117. //            }
    118. //            //视频旋转度
    119. //            String rotate = grabber.getVideoMetadata("rotate");
    120. //            Java2DFrameConverter converter = new Java2DFrameConverter();
    121. //            //绘制图片
    122. //            BufferedImage image = converter.getBufferedImage(frame);
    123. //            if (rotate != null) {
    124. //                // 旋转图片
    125. //                image = rotate(image, Integer.parseInt(rotate));
    126. //            }
    127. //            //创建文件
    128.             file = new File(IdUtils.randomUUID() + ".jpg");
    129.             ImgUtil.write(image, file);
    130. //
    131. //            ByteArrayOutputStream out = new ByteArrayOutputStream();
    132. //            boolean flag = ImageIO.write(image, "gif", out);
    133. //
    134. //            byte[] b = out.toByteArray();
    135. //            out.write(b);
    136. //            log.info("截取视频截图成功");
    137. //            return b;
    138. //        } catch (Exception e) {
    139. //            throw new ServiceException("获取视频封面图,Error，请检查视频链接是否正常");
    140. //        } finally {
    141. //            if (grabber != null) {
    142. //                try {
    143. //                    grabber.stop();
    144. //                } catch (Exception ignored) {
    145. //                }
    146. //            }
    147. //        }
    148. //    }
    149.  
    150.  
    151.  
    152.     public static byte[] getScreenshot(String filePath) {
    153.  
    154.         // 说明是外部资源，需要拼接上https
    155.         if (filePath.startsWith("//") && !filePath.startsWith("/userfiles/ggpt")){
    156.             filePath = "https:" + filePath;
    157.         }
    158.  
    159.         // 有些连文件地址不太正常，且没有后缀，不要紧； 文档资料参考链接：【https://www.codenong.com/7273573/】
    160.  
    161.         // 如果发现是以yml配置开头的url路径，那么就替换成localhost路径
    162.         filePath = filePath.replaceFirst(serve_prefix,_ipUtils.getAccessPath());
    163.         byte[] bytes = null;
    164.         FFmpegFrameGrabber ff = null;
    165.  
    166.         try {
    167.  
    168.             ff = FFmpegFrameGrabber.createDefault(filePath);
    169.             ff.start();
    170.             String rotate = ff.getVideoMetadata("rotate");
    171.             Frame f;
    172.             int i = 0;
    173.             while (i < 6) {
    174.                 f = ff.grabImage();
    175.                 opencv_core.IplImage src = null;
    176.                 if (null != rotate && rotate.length() > 1) {
    177.                     OpenCVFrameConverter.ToIplImage converter = new OpenCVFrameConverter.ToIplImage();
    178.                     src = converter.convert(f);
    179.                     f = converter.convert(rotate(src, Integer.valueOf(rotate)));
    180.                 }
    181.                 i++;
    182.                 if (i == 6) {
    183.                     bytes = doExecuteFrame(f);
    184.                 }
    185.             }
    186.  
    187.             ff.stop();
    188.  
    189.         } catch (FrameGrabber.Exception e) {
    190.             log.error("视频截取失败");
    191. //            throw new ServiceException("获取视频封面图,Error，请检查视频链接是否正常");
    192.         } finally {
    193.             if (ff != null) {
    194.                 try {
    195.                     ff.close();
    196.                 } catch (Exception e) {
    197.                 }
    198.             }
    199.         }
    200.         return bytes;
    201.     }
    202.  
    203.     /*
    204.      * 旋转角度的
    205.      */
    206.     public static opencv_core.IplImage rotate(opencv_core.IplImage src, int angle) {
    207.         opencv_core.IplImage img = opencv_core.IplImage.create(src.height(), src.width(), src.depth(), src.nChannels());
    208.         opencv_core.cvTranspose(src, img);
    209.         opencv_core.cvFlip(img, img, angle);
    210.         return img;
    211.     }
    212.  
    213.     public static byte[] doExecuteFrame(Frame f) {
    214.  
    215.         if (null == f || null == f.image) {
    216.             return new byte[0];
    217.         }
    218.         Java2DFrameConverter converter = new Java2DFrameConverter();
    219.         String imageMat = "jpg";
    220.         BufferedImage bi = converter.getBufferedImage(f);
    221.         System.out.println("width:" + bi.getWidth());
    222.         System.out.println("height:" + bi.getHeight());
    223.  
    224.         ByteArrayOutputStream out = new ByteArrayOutputStream();
    225.         try {
    226.             boolean flag = ImageIO.write(bi, "jpg", out);
    227.             byte[] b = out.toByteArray();
    228.             log.info("截取视频截图成功");
    229.             return b;
    230.         } catch (IOException e) {
    231.             log.error("封面截取失败");
    232.         } finally {
    233.             if (out != null) {
    234.                 try {
    235.                     out.close();
    236.                 } catch (IOException e) {
    237.  
    238.                 }
    239.             }
    240.         }
    241.         return null;
    242.     }
    243.  
    244.  
    245.     /**
    246.      * @param src   ""
    247.      * @param angel 视频旋转度
    248.      * @return BufferedImage
    249.      * @Description 根据视频旋转度来调整图片
    250.      */
    251.     private static BufferedImage rotate(BufferedImage src, int angel) {
    252.         int src_width = src.getWidth(null);
    253.         int src_height = src.getHeight(null);
    254.         int type = src.getColorModel().getTransparency();
    255.         Rectangle rect_des = calcRotatedSize(new Rectangle(new Dimension(src_width, src_height)), angel);
    256.         BufferedImage bi = new BufferedImage(rect_des.width, rect_des.height, type);
    257.         Graphics2D g2 = bi.createGraphics();
    258.         g2.translate((rect_des.width - src_width) / 2, (rect_des.height - src_height) / 2);
    259.         g2.rotate(Math.toRadians(angel), src_width / 2, src_height / 2);
    260.         g2.drawImage(src, 0, 0, null);
    261.         g2.dispose();
    262.         return bi;
    263.     }
    264.  
    265.  
    266.     /**
    267.      * @param src   ""
    268.      * @param angel ""
    269.      * @return Rectangle
    270.      * @Description: 计算图片旋转大小
    271.      */
    272.     private static Rectangle calcRotatedSize(Rectangle src, int angel) {
    273.         if (angel >= 90) {
    274.             if (angel / 90 % 2 == 1) {
    275.                 int temp = src.height;
    276.                 src.height = src.width;
    277.                 src.width = temp;
    278.             }
    279.             angel = angel % 90;
    280.         }
    281.         double r = Math.sqrt(src.height * src.height + src.width * src.width) / 2;
    282.         double len = 2 * Math.sin(Math.toRadians(angel) / 2) * r;
    283.         double angel_alpha = (Math.PI - Math.toRadians(angel)) / 2;
    284.         double angel_dalta_width = Math.atan((double) src.height / src.width);
    285.         double angel_dalta_height = Math.atan((double) src.width / src.height);
    286.         int len_dalta_width = (int) (len * Math.cos(Math.PI - angel_alpha - angel_dalta_width));
    287.         int len_dalta_height = (int) (len * Math.cos(Math.PI - angel_alpha - angel_dalta_height));
    288.         int des_width = src.width + len_dalta_width * 2;
    289.         int des_height = src.height + len_dalta_height * 2;
    290.         return new java.awt.Rectangle(new Dimension(des_width, des_height));
    291.     }
    292.  
    293. }

    对yml中的配置文件进行装配myWebnConfig

    1. package com.goldsign.common.config;
    2.  
    3. import org.apache.commons.lang3.time.DateUtils;
    4. import org.springframework.boot.context.properties.ConfigurationProperties;
    5. import org.springframework.stereotype.Component;
    6.  
    7. import java.io.File;
    8. import java.util.Date;
    9.  
    10. /**
    11.  * 读取项目相关配置
    12.  *
    13.  * @author ruoyi
    14.  */
    15. @Component
    16. @ConfigurationProperties(prefix = "myWeb")
    17. public class myWebSignConfig {
    18.     /**GoldSignConfig
    19.      * 项目名称
    20.      */
    21.     private String name;
    22.  
    23.     /**
    24.      * 版本
    25.      */
    26.     private String version;
    27.  
    28.     /**
    29.      * 版权年份
    30.      */
    31.     private String copyrightYear;
    32.  
    33.     /**
    34.      * 实例演示开关
    35.      */
    36.     private boolean demoEnabled;
    37.  
    38.     /**
    39.      * 上传最大文件大小配置
    40.      */
    41.     private static long fileMaxSize;
    42.  
    43.     /**
    44.      * 上传路径
    45.      */
    46.     private static String profile;
    47.  
    48.     /* 共享盘地址*/
    49.     private static String sharedDisk;
    50.  
    51.     /**
    52.      * 获取地址开关
    53.      */
    54.     private static boolean addressEnabled;
    55.  
    56.     public String getName() {
    57.         return name;
    58.     }
    59.  
    60.     public void setName(String name) {
    61.         this.name = name;
    62.     }
    63.  
    64.     public String getVersion() {
    65.         return version;
    66.     }
    67.  
    68.     public void setVersion(String version) {
    69.         this.version = version;
    70.     }
    71.  
    72.     public String getCopyrightYear() {
    73.         return copyrightYear;
    74.     }
    75.  
    76.     public void setCopyrightYear(String copyrightYear) {
    77.         this.copyrightYear = copyrightYear;
    78.     }
    79.  
    80.     public boolean isDemoEnabled() {
    81.         return demoEnabled;
    82.     }
    83.  
    84.     public void setDemoEnabled(boolean demoEnabled) {
    85.         this.demoEnabled = demoEnabled;
    86.     }
    87.  
    88.     public static String getProfile() {
    89.         return profile;
    90.     }
    91.  
    92.     public void setProfile(String profile) {
    93.         GoldSignConfig.profile = profile;
    94.     }
    95.  
    96.     public static boolean isAddressEnabled() {
    97.         return addressEnabled;
    98.     }
    99.  
    100.     public void setAddressEnabled(boolean addressEnabled) {
    101.         GoldSignConfig.addressEnabled = addressEnabled;
    102.     }
    103.  
    104.     public static String getSharedDisk() {
    105.         return sharedDisk;
    106.     }
    107.  
    108.     public void setSharedDisk(String sharedDisk) {
    109.         GoldSignConfig.sharedDisk = sharedDisk;
    110.     }
    111.  
    112.     public static long getFileMaxSize() {
    113.         return fileMaxSize;
    114.     }
    115.  
    116.     public void setFileMaxSize(long fileMaxSize) {
    117.         GoldSignConfig.fileMaxSize = fileMaxSize;
    118.     }
    119.  
    120.     /**
    121.      * 获取导入上传路径
    122.      */
    123.     public static String getImportPath() {
    124.         return getProfile() + "/import";
    125.     }
    126.  
    127.  
    128.     /**
    129.      * 获取头像上传路径
    130.      */
    131.     public static String getAvatarPath() {
    132.         return getProfile() + "/avatar";
    133.     }
    134.  
    135.     /**
    136.      * 获取下载路径
    137.      */
    138.     public static String getDownloadPath() {
    139.         return getProfile() + "/download/";
    140.     }
    141.  
    142.     /**
    143.      * 获取上传路径
    144.      */
    145.     public static String getUploadPath() {
    146.         return getProfile() + "/upload";
    147.     }
    148.  
    149.  
    150.     /**
    151.      * 获取共享盘图片上传路径
    152.      *
    153.      * @return
    154.      */
    155.     public static String getSharedDiskImgPash() {
    156.         // 如果上传的目录不1位则补0
    157.         String path = getSharedDisk() + "/userfiles/ggpt/image";
    158.         File file = new File(path);
    159.         if (file.exists()) {
    160.             file.mkdirs();
    161.         }
    162.         return path;
    163.     }
    164.  
    165.     /**
    166.      * 获取共享盘【视频文件】上传路径
    167.      *
    168.      * @return
    169.      */
    170.     public static String getSharedDiskVideoPash() {
    171.         // 如果上传的目录不1位则补0
    172.         String path = getSharedDisk() + "/userfiles/ggpt/video";
    173.         File file = new File(path);
    174.         if (file.exists()) {
    175.             file.mkdirs();
    176.         }
    177.         return path;
    178.     }
    179.  
    180.  
    181.     /**
    182.      * 获取共享盘网页上传路径
    183.      *
    184.      * @return
    185.      */
    186.     public static String getSharedDiskH5Pash() {
    187.         // 如果上传的目录不1位则补0
    188.         String path = getSharedDisk() + "/userfiles/ggpt/h5";
    189.         File file = new File(path);
    190.         if (file.exists()) {
    191.             file.mkdirs();
    192.         }
    193.         return path;
    194.     }
    195.  
    196.     /**
    197.      * 获取共享盘图片上传路径
    198.      *
    199.      * @return
    200.      */
    201.     public static String getSharedDiskCVideoCoverPath() {
    202.         // 如果上传的目录不1位则补0
    203.         String path = getSharedDisk() + "/userfiles/ggpt/videoCover";
    204.         File file = new File(path);
    205.         if (file.exists()) {
    206.             file.mkdirs();
    207.         }
    208.         return path;
    209.     }
    210.  
    211.  
    212. }

    必须依赖，如果是ruoyi框架请加载common模块下

    1.         
    2.         <dependency>
    3.             <groupId>org.jsoupgroupId>
    4.             <artifactId>jsoupartifactId>
    5.             <version>1.8.3version>
    6.         dependency>
    7.         视频处理
    8.         <dependency>
    9.             <groupId>org.bytedecogroupId>
    10.             <artifactId>javacv-platformartifactId>
    11.             <version>1.3.1version>
    12.         dependency>
    13.  
    14.         <dependency>
    15.             <groupId>org.springframeworkgroupId>
    16.             <artifactId>spring-testartifactId>
    17.         dependency>
    18.  
    19.         <dependency>
    20.             <groupId>cn.hutoolgroupId>
    21.             <artifactId>hutool-allartifactId>
    22.             <version>5.7.13version>
    23.         dependency>
    24.  
    25.

    最重要的环节来了，springmvc添加 addResourceHandlers

    1.     @Override
    2.     public void addResourceHandlers(ResourceHandlerRegistry registry) {
    3.         /** 本地文件上传路径 */
    4.         // 后管服务自带的目录
    5.         registry.addResourceHandler(Constants.RESOURCE_PREFIX + "/**")
    6.                 // 映射到指定的目錄
    7.                 .addResourceLocations("file:" + GoldSignConfig.getProfile() + "/");
    8.  
    9.         // 这里是hce后管的文件目录,如果是userfiles路径，那么映射到D:/HceShare/hceapp + “/userfiles/” 目录下面
    10.         registry.addResourceHandler("/userfiles" + "/**")
    11.                 // 映射到指定的目錄
    12.                 .addResourceLocations("file:" + GoldSignConfig.getSharedDisk() + "/userfiles/");
    13.  
    14.         /** swagger配置 */
    15.         registry.addResourceHandler("/swagger-ui/**")
    16.                 .addResourceLocations("classpath:/META-INF/resources/webjars/springfox-swagger-ui/");
    17.     }

    最后ruoyi的权限框架不要拦截我们的目录文件

    类OpeAdPicInfo

    1. package com.goldsign.domain;
    2.  
    3. import com.baomidou.mybatisplus.annotation.IdType;
    4. import com.baomidou.mybatisplus.annotation.KeySequence;
    5. import com.baomidou.mybatisplus.annotation.TableId;
    6. import com.baomidou.mybatisplus.extension.activerecord.Model;
    7. import com.fasterxml.jackson.annotation.JsonFormat;
    8. import com.goldsign.common.annotation.Excel;
    9. import lombok.experimental.FieldDefaults;
    10. import org.apache.commons.lang.builder.ToStringBuilder;
    11. import org.apache.commons.lang.builder.ToStringStyle;
    12. import org.springframework.web.multipart.MultipartFile;
    13.  
    14. import java.util.Date;
    15.  
    16. /**
    17.  * 广告轮播图对象 OPE_AD_PIC_INFO
    18.  * 
    19.  * @author goldsign
    20.  * @date 2022-07-08
    21.  */
    22. @KeySequence(value = "SEQ_OPE_AD_PIC_INFO", clazz = String.class)
    23. public class OpeAdPicInfo extends Model {
    24.  
    25.     private static final long serialVersionUID = 1L;
    26.  
    27.     /** 上传的图片文件 */
    28.     private MultipartFile picNmFile;
    29.  
    30.     /** $column.columnComment */
    31.     @TableId(value = "id", type = IdType.INPUT)
    32.     private String id;
    33.  
    34.     /** 图片名称 */
    35.     @Excel(name = "图片名称")
    36.     private String picNm;
    37.  
    38.     /** 图片地址 */
    39.     @Excel(name = "图片地址")
    40.     private String picAddr;
    41.  
    42.     /** 图片描叙 */
    43.     @Excel(name = "图片描叙")
    44.     private String picDesc;
    45.  
    46.     /** 图片是否显示 */
    47.     @Excel(name = "图片是否显示")
    48.     private String picShow;
    49.  
    50.     /** 创建人 */
    51.     @Excel(name = "创建人")
    52.     private String creater;
    53.  
    54.     /** 创建时间 */
    55.     @Excel(name = "创建时间")
    56.     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
    57.     private Date createDt;
    58.  
    59.     /** 最新修改人 */
    60.     @Excel(name = "最新修改人")
    61.     private String modifier;
    62.  
    63.     /** 最新修改时间 */
    64.     @Excel(name = "最新修改时间")
    65.     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
    66.     private Date modifyDt;
    67.  
    68.     /** 备注 */
    69.     @Excel(name = "备注")
    70.     private String remarks;
    71.  
    72.     /** 删除标记 */
    73.     private String deleteFlag;
    74.  
    75.     /** 图片超链接 */
    76.     @Excel(name = "图片超链接")
    77.     private String picHyperlink;
    78.  
    79.     /** 广告类型 */
    80.     @Excel(name = "广告类型")
    81.     private String adType;
    82.  
    83.     /** 广告类型 */
    84.     @Excel(name = "广告类型")
    85.     private String linkType;
    86.  
    87.     /** 倒计时（秒） */
    88.     @Excel(name = "倒计时", readConverterExp = "秒")
    89.     private Integer countdown;
    90.  
    91.     /** $column.columnComment */
    92.     @Excel(name = "倒计时", readConverterExp = "$column.readConverterExp()")
    93.     private String savepic;
    94.  
    95.     @Excel(name = "发布时间")
    96.     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
    97.     private Date releaseTime;
    98.  
    99.     @Excel(name = "锁定时间")
    100.     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
    101.     private Date lockTime;
    102.  
    103.     /** 富文本 */
    104.     private String richText;
    105.  
    106.     // 网页类型，0本地页面，1第三方页面
    107.     private String pageType;
    108.  
    109.     public String getPageType() {
    110.         return pageType;
    111.     }
    112.  
    113.     public void setPageType(String pageType) {
    114.         this.pageType = pageType;
    115.     }
    116.  
    117.     public Date getReleaseTime() {
    118.         return releaseTime;
    119.     }
    120.  
    121.     public void setReleaseTime(Date releaseTime) {
    122.         this.releaseTime = releaseTime;
    123.     }
    124.  
    125.     public Date getLockTime() {
    126.         return lockTime;
    127.     }
    128.  
    129.     public void setLockTime(Date lockTime) {
    130.         this.lockTime = lockTime;
    131.     }
    132.  
    133.     public String getRichText() {
    134.         return richText;
    135.     }
    136.  
    137.     public void setRichText(String richText) {
    138.         this.richText = richText;
    139.     }
    140.  
    141.     public void setId(String id)
    142.     {
    143.         this.id = id;
    144.     }
    145.  
    146.     public String getId()
    147.     {
    148.         return id;
    149.     }
    150.     public void setPicNm(String picNm)
    151.     {
    152.         this.picNm = picNm;
    153.     }
    154.  
    155.     public String getPicNm() 
    156.     {
    157.         return picNm;
    158.     }
    159.     public void setPicAddr(String picAddr) 
    160.     {
    161.         this.picAddr = picAddr;
    162.     }
    163.  
    164.     public String getPicAddr() 
    165.     {
    166.         return picAddr;
    167.     }
    168.     public void setPicDesc(String picDesc) 
    169.     {
    170.         this.picDesc = picDesc;
    171.     }
    172.  
    173.     public String getPicDesc() 
    174.     {
    175.         return picDesc;
    176.     }
    177.     public void setPicShow(String picShow) 
    178.     {
    179.         this.picShow = picShow;
    180.     }
    181.  
    182.     public String getPicShow() 
    183.     {
    184.         return picShow;
    185.     }
    186.     public void setCreater(String creater) 
    187.     {
    188.         this.creater = creater;
    189.     }
    190.  
    191.     public String getCreater() {
    192.         return creater;
    193.     }
    194.  
    195.     public Date getCreateDt() {
    196.         return createDt;
    197.     }
    198.  
    199.     public void setCreateDt(Date createDt) {
    200.         this.createDt = createDt;
    201.     }
    202.  
    203.     public String getModifier() {
    204.         return modifier;
    205.     }
    206.  
    207.     public void setModifier(String modifier) {
    208.         this.modifier = modifier;
    209.     }
    210.  
    211.     public Date getModifyDt() {
    212.         return modifyDt;
    213.     }
    214.  
    215.     public void setModifyDt(Date modifyDt) {
    216.         this.modifyDt = modifyDt;
    217.     }
    218.  
    219.     public void setRemarks(String remarks) {
    220.         this.remarks = remarks;
    221.     }
    222.  
    223.     public String getRemarks()
    224.     {
    225.         return remarks;
    226.     }
    227.     public void setDeleteFlag(String deleteFlag) 
    228.     {
    229.         this.deleteFlag = deleteFlag;
    230.     }
    231.  
    232.     public String getDeleteFlag() 
    233.     {
    234.         return deleteFlag;
    235.     }
    236.     public void setPicHyperlink(String picHyperlink) 
    237.     {
    238.         this.picHyperlink = picHyperlink;
    239.     }
    240.  
    241.     public String getPicHyperlink() 
    242.     {
    243.         return picHyperlink;
    244.     }
    245.     public void setAdType(String adType) 
    246.     {
    247.         this.adType = adType;
    248.     }
    249.  
    250.     public String getAdType() 
    251.     {
    252.         return adType;
    253.     }
    254.     public void setLinkType(String linkType) 
    255.     {
    256.         this.linkType = linkType;
    257.     }
    258.  
    259.     public String getLinkType() 
    260.     {
    261.         return linkType;
    262.     }
    263.     public void setCountdown(Integer countdown) 
    264.     {
    265.         this.countdown = countdown;
    266.     }
    267.  
    268.     public Integer getCountdown() 
    269.     {
    270.         return countdown;
    271.     }
    272.     public void setSavepic(String savepic) 
    273.     {
    274.         this.savepic = savepic;
    275.     }
    276.  
    277.     public String getSavepic() 
    278.     {
    279.         return savepic;
    280.     }
    281.  
    282.     public MultipartFile getPicNmFile() {
    283.         return picNmFile;
    284.     }
    285.  
    286.     public void setPicNmFile(MultipartFile picNmFile) {
    287.         this.picNmFile = picNmFile;
    288.     }
    289.  
    290.     @Override
    291.     public String toString() {
    292.         return new ToStringBuilder(this, ToStringStyle.MULTI_LINE_STYLE)
    293.             .append("id", getId())
    294.             .append("picNm", getPicNm())
    295.             .append("picAddr", getPicAddr())
    296.             .append("picDesc", getPicDesc())
    297.             .append("picShow", getPicShow())
    298.             .append("creater", getCreater())
    299.             .append("createDt", getCreateDt())
    300.             .append("modifier", getModifier())
    301.             .append("modifyDt", getModifyDt())
    302.             .append("remarks", getRemarks())
    303.             .append("deleteFlag", getDeleteFlag())
    304.             .append("picHyperlink", getPicHyperlink())
    305.             .append("adType", getAdType())
    306.             .append("linkType", getLinkType())
    307.             .append("countdown", getCountdown())
    308.             .append("savepic", getSavepic())
    309.             .toString();
    310.     }
    311. }

     有些包名和类型没处理干净，如果有人使用请注意修改

    在sys_menu中有路由参数配置，请参考ruoyi官网配置，vue组件中有用到

    需要用到ipUtils这个在若依里面有，就是用来获取当前服务的地址和端口号+服务名的

    最后还需要修改若依框架的上传代码中文件路径的参数设置

  • 相关阅读:
    DDD领域驱动设计-子域
    刚刚：2023阿里云双十一优惠活动上线了！
    Mac 下安装PostgreSQL经验
    春眠不觉晓，Java数据类型知多少？基础牢不牢看完本文就有数了
    FPGA学习之实现PID算法
    Vue的自定义事件（Custom Events）：实现组件间通信的强大工具
    小红书账号管理软件，批量账号发布笔记！
    java毕业设计医院管理系统Mybatis+系统+数据库+调试部署
    Android程序设计之学校疫情防控管理
    牛视系统源码定制开发come here，抖音矩阵系统。
  • 原文地址：https://blog.csdn.net/weixin_44531193/article/details/126490203