Vuejs: топор ios пост JSON данные и данные изображения - PullRequest
Новая
       21

Vuejs: топор ios пост JSON данные и данные изображения

0 голосов
/ 29 января 2020

В настоящее время я создаю форму с данными изображения и JSON данными. Я использую метод 2 сообщения для публикации данных изображения и данных JSON отдельно для моего nodejs бэкэнда. Возможно ли какое-либо решение, которое позволяет мне публиковать один раз для изображения и JSON данных только с помощью ax ios и backend с помощью nodejs.

Ниже приведен мой код.

Интерфейс vue. js

submitAuth() {
  console.log(this.promo.bannerImg)
  const formData = new FormData()
  formData.append('bannerImg', this.promo.bannerImg)
  formData.append('inAppImg', this.promo.inAppImg)
  formData.append('inAppImg', this.promo)

   axios.post(`http://localhost:5000/success`, 
       this.promo
     )
     .then(response => { 
       console.log('Submit Success')
     })
     .catch(e => {
       console.log('Submit Fail')
     })

  axios.post('http://localhost:5000/uploadImg', 
      formData
  ).then(response => {
    console.log('Submit Success')
  }).catch(e => {
    console.log('Submit Fail')
  })
},

},

Backend node.js

app.post("/success", function (request, response) {
  co(function* () {
    var promouid = request.body.uid
    var filename = __dirname + '/public/promo-json/' +  promouid + '.json'
    var promotionJSON = JSON.stringify(request.body)
    fs.writeFile(filename, promotionJSON, 'utf-8', function (err) {
      if (err) throw err;
      console.log(request.body);
    });

    var stream = fs.createReadStream(filename);
    var size = fs.statSync(filename).size;
    var result = yield client.putStream( 
     'promojson/' + promouid + '.json', stream, {contentLength: size});
    console.log(result);
  }).catch(function (err) {
    console.log(err);
  });
});

app.post("/uploadImg", function (req, res) {
  var storage = multer.diskStorage({
        destination: 'public/image', 
        filename: function ( req, file, cb ) {
          // set image name
          console.log()
          cb( null,  'asdasdsad-' + Date.now());
      }
    });
    var upload = multer({
        storage: storage,
    }).any();

    upload(req, res, function(err) {
        if (err) {
            console.log(err);
            return res.end('Error');
        } else {
            console.log(req.body);
            req.files.forEach(function(item) {
                console.log(item);
            });
          res.end('File uploaded');
        }
    });
  });

1 Ответ

1 голос
/ 29 января 2020

Возможно, вам лучше использовать FormData для всего, что вам нужно загрузить, если вы хотите использовать один запрос для загрузки всего.

Вы можете взять ваши JSON данные, сериализовать их в строку и затем добавить их в FormData вместе с изображением.

Ваш внешний интерфейс vue. js будет выглядеть примерно так: 

const formData = new FormData();

// Add images to form data
formData.append('bannerImg', this.promo.bannerImg)
formData.append('inAppImg', this.promo.inAppImg)
formData.append('inAppImg', this.promo)

// Add the serialized JSON data to the formData (not
// sure what your JSON object is called)
formData.append('data', JSON.stringify(this.data));

// Submit the form data 
axios.post('http://localhost:5000/uploadImg', 
  formData
).then(response => {
  console.log('Submit Success')
}).catch(e => {
  console.log('Submit Fail')
});

В серверной части вы просто десериализуете поле data в FormData, которое отправляется объекту JSON, и вы может затем использовать его.

...