Размер файла загруженного изображения отличается от размера на сервере, его можно просмотреть в браузере, но нельзя открыть - PullRequest
Новая
       14

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

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

Я пытаюсь загрузить изображения из бэкэнда. Внешний интерфейс - Vuejs, а внутренний - Адонис, их порт отличается, поэтому я не могу использовать атрибут загрузки.

Поэтому мне пришлось создать контроллер для обработки загрузки.

Но размер загружаемого изображения отличается от размера на сервере.

Его можно просмотреть в инструменте разработчика и открыть в Sublime Text (к моему удивлению), но нельзя открыть в большинстве средств просмотра изображений, включая рисование и фотошоп.

Исходный размер файла на сервере составляет примерно 5 КБ, а загруженного - около 10 КБ. Я думаю, что это связано с проблемой кодирования. Как вы думаете?

Backend

маршруты. js

Route.group(() => {

  Route.get('/image/posts/:user_id/:filename', 'DownloadController.post').middleware(['auth:jwt'])

}).prefix('/api/download')

DownloadController. js

'use strict'
const UnAuthorizeException = use('App/Exceptions/UnAuthorizeException')
const { HttpException } = use('@adonisjs/generic-exceptions')
const Helpers = use('Helpers')

class DownloadController {
  async post({ request, auth, response, params }) {
    const user = auth.user
    if (!(user.verified)) {
      throw UnAuthorizeException.invoke('unverified_user')
    }
    if (user._id.toString() !== params.user_id) {
      throw UnAuthorizeException.invoke('no_ownership')
    }
    const fileName = params.filename
    if (!fileName) {
      throw new HttpException('Not found', 404)
    }
    const fileDir = Helpers.publicPath(`uploads/image/posts/${params.user_id.toString()}`)
    const filePath = `${fileDir}/${fileName}`
    response.download(filePath) // --------------> is this a problem?
  }

}

module.exports = DownloadController

Фронтенд

Примерно так: 

import httpService from '../../../services/http.service' // just a helpful wrapper of Axios
const fileDownload = require('js-file-download')
window.toastr = require('toastr')
// ... omitted
methods: {
  downloadUrl: function(url) {
    url = "" + url
    return url.replace('uploads', 'api/download')
  },
  downloadPost: function(e) {
    e.preventDefault()
    e.stopPropagation()
    const anchor = e.target
    let url = this.downloadUrl(anchor.getAttribute('href'))
    let filename = anchor.getAttribute('download')
    if (!filename) {
      filename = 'untitled'
    }
    httpService.get(url, {}, true)
      .then(res => {
         fileDownload(res.data, filename) // --------------- >or this one???
      })
      .catch(e => {
        if(e.response && e.response.status == "404") {
          window.toastr("File not found", "Error", {timeOut: 3000})
        }else {
          window.toastr("Oops! Something is wrong. Please try again later...", "", {timeOut: 3000});
        }
      })
  }
}
// ... omitted
...