今天下午使用el-upload自带的上传文件时,使用文档中的网址是可以的,换成开发的接口就报错了,发现是option请求,这让我想到了项目的环境vue+axios发送请求模式,网上看了很多文章,要么说改headers,要么说些自定义的上传方法(我用这个就是为了简单、自己去写我还用这个干啥),反正这些都没帮助,后来看了一篇提到使用代理的问题,瞬间惊醒,才发现这个刚搭建的框架没有配置代理,配置代理之后,搞定了,下面记录下配置代理的步骤:

第一步,把config目录下的index.js文件打开,修改proxyTable(就是代理)属性的设置,改成下面这样:

assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://10.73.4.226:6003',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      },
    },

可以看到中间加入了'/api'属性,这个api是从哪来的呢,请看src/api目录下的拦截器文件(具体名字自己查找),发现里面有这么一行代码:

if (process.env.NODE_ENV === 'development') {
        prefix = '/api/'
    } 

意思就是开发环境下的代码都加上'/api/'的前缀,这样,我们所有发出的请求都可以直接走代理了。

第二步,把el-upload组件的action属性的前面加上'/api/'(当然,是不带域名和端口的链接),为什么呢?因为我们的拦截器拦截的都是axios发送的请求,这个上传组件action地址并没有走axios,所以需要手动添加'/api/'来告诉node我要使用代理了。

最后,直接npm run dev重启,再次选择文件上传,你就会发现可以上传成功了。

Logo

前往低代码交流专区

更多推荐