Не удается получить данные файла в запросе Extjs Ajax

Question

У меня есть форма в окне формы, а внутри окна формы у меня есть форма с множеством полей и одной кнопкой загрузки. При попытке отправить форму с помощью Ajax.request у меня есть значение текстового поля, но я не могу получить данные файла. Кроме имени файла.

    var fd = Ext.getCmp('users-form').form;
    var fileInput = document.getElementById('company_logo');
    console.log(fd.getEl().dom.files);
    params = {
        name            : fd.findField('name').getValue(),
        login           : fd.findField('login').getValue(),
        email           : fd.findField('email').getValue(),
        password        : fd.findField('password').getValue(),
        password_repeat : fd.findField('password_repeat').getValue(),
        id              : fd.findField('id').getValue()
        company_logo    : fd.findField('logo').getValue()
    }
    console.log(params);
Ext.Ajax.request({
      url: Scada.reqUrl('users', 'save'),
      method: 'post',
      params: {
        data: Ext.encode(params)
      },
      success: function() {
        console.log('in success');
      },
      failure: function() {
        console.log('in failure');
      }
    });

Здесь логотип является типом файла ввода. Я хочу отправить данные логотипа с запросом ajax. Пожалуйста, помогите мне разобраться в проблеме. Спасибо

Answer 1

Не уверен, почему вы начали новый вопрос вместо редактирования Кодируйте данные формы, пока fileupload true в Extjs Form Submit , так как это похоже на ту же проблему.

Предполагается, что logoваше поле загрузки файла, которое вы пытаетесь получить с помощью getValue данных файла, на самом деле не возвращает содержимое файла (если вы используете modern, существует метод getFiles, который возвращает выбранные объекты файла).

Общие проблемы с вашим подходом: Как я уже говорил в своем первоначальном ответе, отправлять файлы в стандартном запросе AJAX не рекомендуется. В вашем случае это следующие проблемы:

• Если вы ожидаете, что getValue вернет содержимое файла, вы потенциально кодируете двоичные данные в строку JSON. Возможно, это сработает, но создаст большие издержки, и в качестве единственного доступного типа данных JSON, который может обрабатывать это содержимое, будет string, ваш анализатор должен будет предположить, что свойство company_logo содержит двоичные данные и его необходимо каким-то образом преобразовать в какой-то файлссылка.
• Вы отправляете файлы без метаданных, поэтому, просто добавляя необработанный контент в строку JSON, вы не сможете обнаружить ожидаемый тип файла, не протестировав файл несколькими способами
• Насколько я знаю, вы вообще не сможете получить доступ к содержимому файла в классическом наборе инструментов

Отправка данных в виде: В исходном вопросе вы объяснили, что выотправьте форму вместо выполнения запросов Ajax, что обычно является предпочтительным способом. Когда вы отправляете форму, которая содержит поле загрузки файла, форма будет автоматически отправлена ​​в виде multipart/form-data необработанные файлы будут добавлены в тело запроса с его исходным содержимым при сохранении метаданных, собранных браузером.

Если выпосмотрите на https://docs.sencha.com/extjs/7.0.0/modern/Ext.Ajax.html#method-request, вам нужно установить для isUpload значение true и использовать form proeprty вместо params, передав ссылку на родительскую форму.