element 框架 el-upload 上传文件问题

在使用Vue+element 中的el-upload组件做文件上传时，最根本的原因是把路径写错，导致系统提示跨域错误，直接看代码：

 <el-upload
  :action="targetAction"
  :show-file-list="false" 
  :auto-upload="true" 
  :before-upload="beforeAvatarUpload" 
  :on-success="successFun" 
  :on-error="errorFun">
  <el-button size="small" type="primary">点击上传</el-button>
 </el-upload>    



data() {
  return {
    targetAction: ''
  }
}

el-upload其他属性就不多说，官方文档都有，这里只说action属性，绑定的targetAction就是我们需要上传的路径。

开发的过程中我犯了两个错误：
1、因为是连着本地后台开发，所以当我直接写后台路径加接口名称的时候，报500，因为域名不同肯定是会报跨域问题的，如下

this.targetAction =   'http://88.128.19.40:8181/api/configurationController/loadConfig'

2、需要注意的是，webpack已经帮助我们做了转发代理，所以我们在访问后台才不会出现跨域问题，但是我忘了代理转发过程中已经对路径进行重写，此时报了404，我上传的路径如下：

// 这里的window.location.origin 即 http://localhost:8020
this.targetAction =  `${window.location.origin}/api/configurationController/loadConfig`

此时我找到config下的index.js，可以看到pathRewrite属性已经把路径重写为/apiurl，所以我们在开发环境下必须加上这一段，并且生产环境中是不需要的

那接下来的事情就很明确了，在上传文件前确认当前的环境，然后根据不同环境对路径进行重写，这样便于我们维护和扩展，所以我们接下来看到我们是如何定义系统中的环境的：

找到config/dev.env.js:

找到config/pro.env.js:

接下来我们获取环境，并且当环境为development时和production时对路径进行不同定义，代码如下：

let baseUrl = process.env.NODE_ENV === 'production'?'':'/apiurl';

this.targetAction =  `${window.location.origin}/api/configurationController/loadConfig`

到这里我们上传文件的功能就大功告成了！