Al implementar un editor de texto enriquecido con el componente piaoyi-editor en una aplicación uni-app para WeChat Mini Program, se encontró un problema al intentar subir imágenes. La configuración inicial no permitía una carga exitosa, requiriendo ajustes en el componente y en la lógica de subida.

El código de integración en la vista principal se presenta a continuación, con propiedades personalizadas para el editor:

<view class="contenedor-formulario">
    <view class="etiqueta">{{ getText('detallesActividad') }}</view>
    <view class="area-editor">
        <piaoyiEditor :valores="valoresContenido" :limite="3000" @actualizacion="manejarCambios" :modoLectura="modoLectura" :rutaFoto="rutaFoto" :servicioApi="servicioApi" :campoNombre="campoNombre"/>
        <view class="oculto" v-if="false">
            {{textoAuxiliar}}
        </view>
    </view>
</view>

En el script de la aplicación, se definen los datos y métodos necesarios para manejar el editor y la subida de imágenes:

datos() {
    return {
        modoLectura: false,
        rutaFoto: obtenerUrlCompleta('https://servidor.ejemplo.com:8766'),
        servicioApi: '/api/subir/imagen',
        textoAuxiliar: '',
        campoNombre: 'archivo',
    };
},
metodos: {
    manejarCambios(evento) {
        this.textoAuxiliar = evento.html
        this.formulario.contenido = evento.html
    },
}

El fallo persistía porque la subida de archivos no estaba configurada adecuadamente. Para resolverlo, se modificó el archivo piaoyi-editor.vue, específicamente la función de subida, ajustando el encabezado de autorización y el manejo de la respuesta del servidor.

La versión corregida de la función de subida se muestra a continuación, con cambios en las variables y la estructura para asegurar la correcta comunicación con el backend:

uni.uploadFile({
    url: this.rutaFoto + this.servicioApi,
    filePath: rutasTemporales,
    name: this.campoNombre,
    formData: {},
    header: {
        'Authorization': uni.getStorageSync('token')
    },
    success: (respuestaSubida) => {
        const resultado = JSON.parse(respuestaSubida.data)
        console.log('Respuesta del servidor:', resultado)
        if (resultado.status === 200) {
            console.log("Imagen subida:", resultado);
            this.urlFinal = resultado.data[0].url
            wx.showToast({
                title: resultado.msg,
                icon: 'none'
            })
            this.contextoEditor.insertImage({
                src: this.urlFinal,
                alt: 'imagen',
                success: function() {}
            })
        } else {
            wx.showToast({
                title: resultado.msg,
                icon: 'none'
            })
        }
    },
    fail(error) {
        console.log(error)
        uni.showToast({
            title: error.errMsg,
            icon: 'none'
        })
    }
});