Multipart или base64 для загрузки файлов AJAX?

Question

Я пишу одностраничное приложение с EmberJS и вам нужно загрузить несколько файлов.

Я написал специальный вид, который обертывает поле ввода файла и извлекает первый выбранный файл. Это позволяет привязать объект File -Object к атрибуту model.

Теперь мне нужно выбрать.

Я могу написать специальное преобразование файла, которое сериализует File -Object для base64 и просто PUT/POST.

Или я могу перехватить RESTAdapter методы createRecord и updateRecord, чтобы проверить каждую модель для File -Объектов и переключают запросы PUT/POST для multipart/form-data и отправить его с помощью FormData

один из этих направлений представляют ли значительной проблемы?

Answer 1

Мне приходилось оценивать ту же самую заботу об обновляемом API, который я разрабатываю. На мой взгляд, самым идеальным методом было бы просто использовать RESTAdapter с базовыми кодированными данными.

При этом мне пришлось использовать метод multipart/form-data в моем случае, поскольку передача данных на 30% выше, когда base64 кодирует данные файла. Поскольку мой API должен был принимать большие (100 МБ +) файлы, я решил использовать метод POST API для получения данных с множественной формой, причем данные файла и json являются одной из переменных POST.

Итак, если вам не нужно загружать большие файлы, как в моем случае, я бы рекомендовал всегда придерживаться методов REST.

Answer 2

Просто наткнулся на это сам и в итоге использовал простой вызов JQuery AJAX, используя объект FormData. Моя многоэкранная реализация (где можно сразу удалить несколько файлов) выглядит так:

filesDidChange: function() { 
    // Get FileList 
    var $input = this.$('input'), 
     fileList = $input.get(0).files; 

    // Iterate files 
    for (var i = 0; i < fileList.length; i++) { 
    var file = fileList[i], 
     formData = new FormData(); 

    // Append information to FormData instance 
    formData.append('attachment[title]', file.name); 
    formData.append('attachment[file]', file); 
    formData.append('attachment[post_id]', this.get('post.id')); 

    // Send upload request 
    Ember.$.ajax({ 
     method: 'POST', 
     url: '/attachments', 
     cache: false, 
     contentType: false, 
     processData: false, 
     data: formData, 
     success: makeSuccessHandler(this), 
     error: makeErrorHandler(this) 
    }); 
    } 

    // Notify 
    this.container.lookup('util:notification').notify('Uploading file, please wait...'); 

    // Clear FileList 
    $input.val(null); 
},