富文本内容图片url替换问题

    //多张图片也可以支持
    function imageUrlHander(content){
        content = `<p><img src="../search/albumsdetail?tn=albumsdetail&word=%E5%9F%8E%E5%B8%82%E5%BB%BA%E7%AD%91%E6%91%84%E5%BD%B1%E4%B8%93%E9%A2%98&fr=searchindex_album%20&album_tab=%E5%BB%BA%E7%AD%91&album_id=7&rn=30'" title="1591061098200080612.jpg"/></p>`; //富文本内容(后台返回图片路径不正确)
        var reg = /<img [^>]*src=['"]([^'"]+)[^>]*>/g; //img 标签取src里面内容的正则
        var srcArr = content.match(reg);//取到所有img标签放到数组中
        if(srcArr.length){
            for (let i = 0; i < srcArr.length; i++) {
            var srcImg = srcArr[i].replace(reg, '$1');
            var url = srcImg.slice(2);
            var newImg = srcArr[i].replace(srcImg, 'https://image.baidu.com' + url);
            content = content.replace(srcArr[i],newImg);
            }        
         }
         console.log(content)
         //`<p><img src="https://image.baidu.com/search/albumsdetail?tn=albumsdetail&word=%E5%9F%8E%E5%B8%82%E5%BB%BA%E7%AD%91%E6%91%84%E5%BD%B1%E4%B8%93%E9%A2%98&fr=searchindex_album%20&album_tab=%E5%BB%BA%E7%AD%91&album_id=7&rn=30'" title="1591061098200080612.jpg"/></p>`
         return content;
    }
     
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
为了在Vue3中使用wangEditor富文本批量上传图片,你需要按照以下步骤进行操作: 1.首先,你需要安装wangEditor。你可以通过npm安装wangEditor,命令如下: ```shell npm install wangeditor --save ``` 2.在你的Vue组件中引入wangEditor,并在mounted钩子函数中初始化wangEditor。你需要在初始化时设置上传图片的配置,包括上传图片的路径和上传图片的处理函数。以下是一个示例: ```javascript <template> <div ref="editorElem" /> </template> <script> import wangEditor from 'wangeditor' export default { mounted() { const editor = new wangEditor(this.$refs.editorElem) // 配置上传图片的路径和处理函数 editor.customConfig.uploadImgServer = '/upload' editor.customConfig.uploadImgHooks = { before: function(xhr, editor, files) { // 在这里可以对上传的图片进行处理 }, success: function(xhr, editor, result) { // 图片上传成功后的处理函数 }, fail: function(xhr, editor, result) { // 图片上传失败后的处理函数 }, error: function(xhr, editor) { // 图片上传出错的处理函数 }, timeout: function(xhr, editor) { // 图片上传超时的处理函数 }, customInsert: function(insertImg, result, editor) { // 在这里可以对插入的图片进行处理 insertImg(result.data) } } editor.create() } } </script> ``` 在上面的代码中,你需要将`/upload`替换为你的图片上传路径。在`uploadImgHooks`中,你可以设置上传图片的处理函数,包括上传前的处理函数、上传成功后的处理函数、上传失败后的处理函数、上传出错的处理函数、上传超时的处理函数和插入图片后的处理函数。在`customInsert`函数中,你可以对插入的图片进行处理。 3.在你的服务器端设置图片上传的处理函数。在上传图片的处理函数中,你需要将上传的图片保存到服务器上,并返回一个JSON格式的数据,包括图片URL图片的宽度和高度。以下是一个示例: ```python import os from flask import Flask, request, jsonify from werkzeug.utils import secure_filename app = Flask(__name__) @app.route('/upload', methods=['POST']) def upload(): file = request.files['file'] filename = secure_filename(file.filename) file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename)) url = 'http://example.com/uploads/' + filename return jsonify({ 'errno': 0, 'data': [url], }) ``` 在上面的代码中,你需要将`http://example.com/uploads/`替换为你的图片上传路径。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值