时间戳

首页 > 解决方案 > Express：来自 vue.js 的图像未重定向到后端

javascript - Express：来自 vue.js 的图像未重定向到后端

问题描述

我有一个通过 express 调用后端的 vue 应用程序。当我将图像添加到请求时，请求不会重定向到后端。但是，当我直接从 vue 应用程序调用后端时，没有 express，请求被正确处理。图像在途中以某种方式丢失。

Vue代码：

    uploadImage(){
        this.loadingImage = true
        const url = "/person/"+localStorage.getItem("userUuid")+"/picture";
        var config = {headers: {"Authorization": "Bearer "+localStorage.getItem("token")}};
        const fd = new FormData();
        fd.append('image', this.picture, this.picture.name)
        this.$http.post(url, fd, config)
        .then((response) => {
             console.log(response)
            this.loadingImage = false
             //window.location.reload()
        })
        .catch((error) => {
            console.log(error)
        })

应用程序.js

const proxy = require('express-http-proxy');
const express = require('express')
const fileUpload = require('express-fileupload');
const app = express();

app.post('/person/:id/picture', proxy(config.backendURL, {
    filter: function(req, res) {return checkBearer(req, res)}
}));

标签： javascriptvue.jsexpressfileexpress-fileupload

解决方案

当前，您尝试做的是在公用文件夹中找到图像，因为浏览器假定/<path>使用相同的主机和端口。在您的情况下，您使用的是 express，因此您的 API/Webserver 位于不同的主机和/或端口上。使用您当前的配置，您必须将图像托管在/publicvue 的目录中才能按预期工作。

因此，您需要告诉您的浏览器在别处寻找图像。由于它在同一个域 ( localhost) 上并且在不同的端口上，您可以使用计算属性来返回当前主机名。假设您在本地计算机上，localhost或者我们可以通过window.location.hostname.

在 Vue 中添加一个计算属性来获取您的域/主机名并更改端口号，如下所示：

computed:{
   baseUri(){
        return `${window.location.hostname}:3000`;
   }
}

然后修改您的 URL 以包含我们从计算属性中获得的主机名

const url = `${this.baseUri}/person/${localStorage.getItem("userUuid")}/picture`;

现在您的图像应该从正确的服务器加载

您还可以向您的计算属性添加一些逻辑，假设您的图像 URL 在生产中托管在不同的域上，但是当您在本地开发时，它们是在本地服务器上从 express 运行的。

computed:{
   baseUri(){
        return process.env.NODE_ENV === 'development' ? 
            `${window.location.hostname}:3000`:
            'myimages.mydomain.com'; // <-- you can also change the port here if you need
   }
}

推荐阅读