vue-quill-editor富文本自定义上传图片

提示

记录一下自己遇到的问题，传入图片过大，如何解决？图片格式是base64，巨大长度，会给服务器很大压力，可以利用组件的自定义上传来处理。

在 options--modules 内添加 handlers 配置

利用axios自定义调用接口上传图片，然后拿到返回的图片路径，这样富文本内就只保存图片路径，而不是base64,大大减下了处理压力

handlers: {
    image: function() {
        const input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/*');
        input.click();

        input.onchange = async () => {
            const file = input.files[0];
            if (file) {
                // 检查文件大小
                if (file.size / 1024 / 1024 > 5) {
                    ElMessage.error('图片大小不能超过 5MB!');
                    return;
                }

                const formData = new FormData();
                formData.append('file', file);
                
                try {
                    // 显示上传中提示
                    const loadingInstance = ElMessage({
                        type: 'info',
                        message: '图片上传中...',
                        duration: 0,
                        showClose: true
                    });

                    console.log(formData, 'formData');
                    const response = await axios.post('上传接口路径', formData, {
                        headers: {
                            'Authorization': 'Bearer ' + getToken(),
                            'Content-Type': 'multipart/form-data'
                        }
                    });
                    
                    // 关闭上传中提示
                    loadingInstance.close();
                    
                    if (response.data.code === 200) {
                        const url = '/' + response.data.data.rows.filePath + response.data.data.rows.fileObjectName;
                        const range = this.quill.getSelection(true);
                        this.quill.insertEmbed(range.index, 'image', url);
                        ElMessage.success('图片上传成功');
                    } else {
                        ElMessage.error('上传失败');
                    }
                } catch (error) {
                    console.error('上传错误:', error);
                    ElMessage.error('上传失败');
                }
            }
        };
    }
}

handlers: {
    image: function() {
        const input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/*');
        input.click();

        input.onchange = async () => {
            const file = input.files[0];
            if (file) {
                // 检查文件大小
                if (file.size / 1024 / 1024 > 5) {
                    ElMessage.error('图片大小不能超过 5MB!');
                    return;
                }

                const formData = new FormData();
                formData.append('file', file);
                
                try {
                    // 显示上传中提示
                    const loadingInstance = ElMessage({
                        type: 'info',
                        message: '图片上传中...',
                        duration: 0,
                        showClose: true
                    });

                    console.log(formData, 'formData');
                    const response = await axios.post('上传接口路径', formData, {
                        headers: {
                            'Authorization': 'Bearer ' + getToken(),
                            'Content-Type': 'multipart/form-data'
                        }
                    });
                    
                    // 关闭上传中提示
                    loadingInstance.close();
                    
                    if (response.data.code === 200) {
                        const url = '/' + response.data.data.rows.filePath + response.data.data.rows.fileObjectName;
                        const range = this.quill.getSelection(true);
                        this.quill.insertEmbed(range.index, 'image', url);
                        ElMessage.success('图片上传成功');
                    } else {
                        ElMessage.error('上传失败');
                    }
                } catch (error) {
                    console.error('上传错误:', error);
                    ElMessage.error('上传失败');
                }
            }
        };
    }
}

vue-quill-editor富文本自定义上传图片 ​

vue-quill-editor富文本自定义上传图片