angular7富文本编辑器ngx-quill实现自定义及图片、视频上传功能

quill-editor元素定义

  


    
      
      
      
      
    

    
      
      
    

    
      
      
    

    
      
      
    

    
      
      
    

    
      
      
    

    
      
    

    
    
    
      
      
        
      
      
        
      
    

    
      
        
        
        
        
      
    
  

  
  



获取数据

rich-text.component.ts

实现思路：将富文本中的图片上传、视频上传上面的按钮实现自定义，即删除class属性，然后自定义点击事件，在富文本中添加对应的input file表单元素。然后通过点击图片、视频图标按钮，调用input选择文件的弹框。

选择文件之后上传到服务器，然后服务器返回对应的链接地址，然后将地址插入到富文本中即可。

图片和视频的上传方式都试通过base64上传：

import { Component, OnInit, ViewChild } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-rich-text',
  templateUrl: './rich-text.component.html',
  styleUrls: ['./rich-text.component.css']
})
export class RichTextComponent implements OnInit {

    @ViewChild('fileUploadVideo') fileUploadVideo: any;
    @ViewChild('fileUploadImg') fileUploadImg: any;

    content: any = '';

    public api = 'http://192.168.1.112:8013/ActionApi/File/UploadHttpImage';

    httpOptions = {
        headers: new HttpHeaders().set('Content-Type', 'application/json').set('Content-Type', 'application/x-www-form-urlencoded')
    };

    constructor(public http: HttpClient) { }

    ngOnInit() {}

    getData() {
        console.log(this.content);
    }

    // 上传视频
    videoFun() {
        const that = this;

        // 调用弹框
        this.fileUploadVideo.nativeElement.click();

        this.fileUploadVideo.nativeElement.onchange = function() {
            const filereader = new FileReader();
            const fileType = this.files[0].type; // 获取文件类型

            if (!/video\/\w+/.test(fileType)) {
                alert('看清楚，这个需要视频！');
                return false;
            }
            
            if (this.files[0]) {
                if (this.files[0].size / 1024 / 1024 > 100) {
                    alert('视频上传大小不要超过100MB, 请重新上传！');
                    return;
                }
            }

            const videoName = this.files[0].name;
            filereader.readAsDataURL(this.files[0]); // 将文件以Data URL形式读入页面

            filereader.onload = () => {
                const result = filereader.result;
                if (result) {
                    // ajax数据请求
                    const params = `Base64Video=${result}&Base64VideoName=${videoName}`;
                    that.http.post(that.api, params, that.httpOptions).subscribe((data: any) => {
                        console.log(data);
                        if (data.IsSucceed) {
                            const video = ``; // 此处必须是iframe,不支持video标签
                            that.content += video;
                        } else {
                            alert('上传失败，请重新上传');
                        }
                    });
                }
            };
        };
    }

    // 图片上传
    imgFun() {
        const that = this;

        // 调用弹框
        this.fileUploadImg.nativeElement.click();

        this.fileUploadImg.nativeElement.onchange = function() {
            const filereader = new FileReader();
            const file = this.files[0]; // 获取文件类型

            if (!/image\/\w+/.test(file.type)) {
                alert('看清楚，这个需要图片！');
                return false;
            }

            if (this.files[0]) {
                if (this.files[0].size / 1024 / 1024 > 2) {
                    alert('图片上传大小不要超过2MB, 请重新上传！');
                    return;
                }
            }

            const imgName = file.name;
            filereader.readAsDataURL(file);

            filereader.onload = () => {
                const result = filereader.result;
                if (result) {
                    // ajax数据请求
                    const params = `Base64Image=${result}&Base64ImageName=${imgName}`;
                    console.log(result);
                    that.http.post(that.api, params, that.httpOptions).subscribe((data: any) => {
                        console.log(data);
                        if (data.IsSucceed) {
                            const img = ``; // 此处必须是写死的动态值，不能动态创建img标签
                            that.content += img;
                        } else {
                            alert('上传失败，请重新上传');
                        }
                    });
                }
            };
        };
    }

}

上传存在的问题

前台将图片视频转成base64通过post提交到后台之后，会出现如下的错误：不同的不同不同的错误，比如：参数无效，长度溢出等等。

核心原因：base64的数据传到后台之后会把json数据中的base64数据中的+号变成空格，导致的问题。

解决方法：编码问题

第一种：前端解决（未尝试）

'+' 字符在js传到后台的时候 都会被转义为' ' 的，所以可以将json字符串进行Base64转码之后再传到后台，安全性高一点，需要导入base64.js包代码如下：
    var  jsonStr = JSON.stringify(json)
     var base = new Base64();
     var jsonbase = base.encode(jsonStr)
     //这样就把json数据转码成为了base64字符串，将这个字符串做参数传到后台就行了，就避免了'+'被转义为' ' 

第二种：后端解决

后端在转码的过程中设置和前端统一的编码格式，将所有的空格 ' ' 转成 +即可。

如果出现转码问题，还有就是base64转码的过程中，如果位数不够，后面的需要=补齐。

视频显示问题

在视频上传成功之后，正确的视频地址却无法访问，需要单独在IIS里面设置一下格式即可访问。