使用JavaScript上传图片至Liferay文档媒体库仅传文件名，如何解决？

你的问题核心是未传递实际文件内容：原代码直接把input DOM元素传给file参数，但Liferay的add-file-entry接口需要的是文件二进制数据，而非DOM元素；另外手动拆分文件名的方式冗余易出错，直接读取File对象的name属性即可。

以下是两种可行的修正方案：

方案一：使用FormData封装上传（推荐） #

利用FormData自动处理multipart/form-data格式，完美适配Liferay文件上传接口：

$('#form').submit(function(event){
    event.preventDefault();

    var input = document.getElementById("file");
    var file = input.files[0];
    if (!file) return; // 未选择文件时直接退出

    // 封装所有请求参数
    var formData = new FormData();
    formData.append('repositoryId', Liferay.ThemeDisplay.getRepositoryId()); // 获取当前站点文档库ID
    formData.append('folderId', 0);
    formData.append('sourceFileName', file.name);
    formData.append('mimeType', file.type || 'image/jpeg'); // 自动适配多种图片格式
    formData.append('title', file.name);
    formData.append('description', '');
    formData.append('changeLog', '');
    formData.append('file', file);

    // 调用Liferay服务
    Liferay.Service(
        '/dlapp/add-file-entry',
        {
            parameters: formData,
            contentType: false // 让浏览器自动设置正确的Content-Type
        },
        function(response) {
            console.log('上传成功:', response);
            // 添加上传成功后的业务逻辑
        },
        function(error) {
            console.error('上传失败:', error);
            // 添加错误处理逻辑
        }
    );
});

方案二：使用FileReader读取二进制数据 #

通过FileReader将文件转为ArrayBuffer后传递：

$('#form').submit(function(event){
    event.preventDefault();

    var input = document.getElementById("file");
    var file = input.files[0];
    if (!file) return;

    var reader = new FileReader();
    reader.onload = function(e) {
        // 获取文件二进制数据
        var fileBuffer = e.target.result;

        Liferay.Service('/dlapp/add-file-entry', {
            repositoryId: Liferay.ThemeDisplay.getRepositoryId(),
            folderId: 0,
            sourceFileName: file.name,
            mimeType: file.type || 'image/jpeg',
            title: file.name,
            description: '',
            changeLog: '',
            file: fileBuffer // 传递二进制数据
        },
        function(response) {
            console.log('上传成功:', response);
        },
        function(error) {
            console.error('上传失败:', error);
        });
    };
    // 将文件读取为ArrayBuffer格式
    reader.readAsArrayBuffer(file);
});

关键注意事项 #

• 确保repositoryId正确：优先用Liferay.ThemeDisplay.getRepositoryId()获取当前站点文档库ID，避免手动写死ID导致适配问题
• 处理空文件情况：添加if (!file) return避免无文件时发起无效请求
• MIME类型适配：优先用file.type自动获取，硬写image/jpeg会限制仅能上传JPG，无法兼容PNG、WebP等格式
• 回调处理：务必实现成功和失败回调，方便调试和业务逻辑处理

内容的提问来源于stack exchange，提问作者Lincolnmyth