загрузить почтовый файл от reactjs до nodejs - PullRequest
Новая
       19

загрузить почтовый файл от reactjs до nodejs

1 голос
/ 22 марта 2020

Я создаю веб-сайт для передачи файлов и столкнулся с большой проблемой! Я работаю с react.js express.js и цифровыми океанскими пространствами. Когда я перетаскиваю файл в зону перетаскивания и нажимаю «Отправить», файл должен быть загружен в цифровое пространство океана, это похоже на amazon s3. Итак, теперь я могу загрузить файл без каких-либо проблем, но было бы гораздо больше, если бы я мог сжать файл при реакции, прежде чем отправить его в цифровой океан через Express. И вот проблема! Я не могу отправить заархивированный файл! Я уже проверил отправку zip-файла почтальоном, и он работает, но когда я пытаюсь отправить его с клиента (реагировать), используя ax ios, ничего не происходит.
Пожалуйста, нужна помощь :( Прошло 3 дня, что Я ищу, как заставить его работать, но никак не могу. Спасибо большое, ребята.

Загрузка. js компонент клиента (реагирует): 

export const upload = (form, callback = () => {}) => {

    const url = `${apiURL}/upload`;

    let files = _.get(form, 'files', []);

    let data = new FormData();

    const folderName = "upload";
    let zip = new JSZip();
    let content = zip.folder(folderName);

    _.each(files, (file) => {

        content.file(file);

    })            

    zip.generateAsync({type:"blob"}).then(function(blob) {           
        data.append('files', blob);
    });

    data.append('to', _.get(form, 'to'));
    data.append('from', _.get(form, 'from'));
    data.append('message', _.get(form, 'message'));

    const config = {

        onUploadProgress : (event) => {

            console.log('UPLOAD EVENT from Upload.js ', event);

            return callback({
                type : 'onUploadProgress',
                payload : event
            })
        }

    }

    axios.post(url, data, config).then((response) => {

        //upload success
        return callback({
            type : 'success',
            payload : response.data  
        })

    }).catch((err) => {
        return callback({
            type : 'error',
            payload : err
        })
    });
}

1 Ответ

0 голосов
/ 26 марта 2020

Наконец-то я нашел решение, возможно, мой подход был верным, но в то же время это решение, использующее JSZIP на лицевой стороне, ограничено 5Mo / файлом, и оно очень плохого размера. Таким образом, решение было на самом деле отправить относительный путь каждого файла на стороне сервера (express) и сохранить его на MONGODB. после этого, когда дело дошло до загрузки файла, я использовал архиватор файлов, чтобы сжать файлы, полученные из цифрового океана, указав их относительный путь непосредственно в функции добавления файла fileObject.

Вот код:

class FileArchiver {

constructor(app, files = [], response) {

    this.app = app;
    this.files = files;
    this.response = response;

}

download(){

    const app = this.app;
    const files = this.files;
    const response = this.response;
    let fullPath = null;
    //const uploadDir = app.get('storageDirectory');
    const zip = archiver('zip');

    response.attachment('download.zip');
    zip.pipe(response);

    const s3Downloader = new S3Download(app, response);

    _.each(files, (file) => {

        fullPath = _.get(file, 'fullPath');
        const fileObject = s3Downloader.getObject(file);
        if(fullPath === null || fullPath === ''){
            zip.append(fileObject, {name : _.get(file, 'originalName')});
        } else {
            zip.append(fileObject, {name : _.get(file, 'fullPath')}); //Here put the absolute path (relative path)
        }


    })

    zip.finalize();

    return this;
}

}

// Экспорт модулей module.exports = {FileArchiver}

...