Я пытаюсь загрузить изображения из бэкэнда. Внешний интерфейс - 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