VUE之Element-ui文件上传详解
补充：代理的使用
：代表上传的地址，在开发中一般写成动态绑定的属性,在计算属性中决定其最终值。
<el-upload:action="uploadURL">
</el-upload>
<script>export default {data() {return {uploadURL: '',};},computed: {uploadURL() {if(process.env.NODE_ENV === 'production'){return '/api/uploadFile'}return '/dev-api/api/uploadFile'}}}
</script>
为什么要区分运行环境来使用不同的url？因为开发环境配置了代理
proxy: {[REQUEST_PRE]: {target: 'http://localhost:88',changeOrigin: true,secure: false,pathRewrite: {['^' + process.env.VUE_APP_BASE_API]: ''}}, }
而这个值在开发环境中是"/dev-api",在生产环境是“/”
所以开发环境需要在开头加上"/dev-api"，生产环境则不需要
那为什么只有这一个要单独处理，其他的url不需要呢？因为其他的url是通过axios请求的，axios中配置了，所以其他的url不需要单独处理了
什么是代理？为什么要用代理
因为开发环境是配置了代理的,代理就是通过一个特殊的网络服务去访问另一个网络服务的一种间接访问方式。像我们不能直接访问国外的网站，只能使用VPN，就是是使用了代理。
那么前端为什么要代理？
前端应用的要能访问，那必须是放在服务器上，（服务器可以是nginx、node.js、、等），我们本地vue开发就是用启动了一个服务。由于浏览器的同源策略（协议，IP，端口号都相同为同源），禁止网站向非同源的服务器发送ajax异步请求，也就是跨域。
因此使用代理来解决跨域问题
代理的使用 Vue代理配置
的代理设置在vue..js->->proxy
vite构建的vue代理设置在 vite..js->->proxy
（Vite 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个 基于原生 ES- 的前端构建工具）
他们的代理配置是一样的，这里以为例:
const REQUEST_PRE = "/api"
module.exports = {// 其他配置省略// 本地代理配置devServer: {// 默认是false，可以将http://localhost:8080 变为 https://localhost:8080https: true,// 代理配置proxy: {// 简单写法"/normal":{target: 'http://localhost:80',ws: true, // 允许websocket代理changeOrigin: true //允许跨域},// 变量写法[REQUEST_PRE]: {target: 'http://localhost:88',ws: true,changeOrigin: true},// 重写，当访问http://localhost:80/req/getData// 实际上访问的是 http://localhost:8888/module/getData'/req': {target: 'http://localhost:8888',pathRewrite: path => path.replace('/req', '/module'),//replace方法返回一个替换好的新的字符串ws: true,changeOrigin: true},},open: true}
}
注意（坑点）：
1、后面的反斜杠要保持一致，虽然对接口调用没有影响，但是对代理文件的相对路径有影响
如 /req，就写 :8888
如 /req/，就写 :8888/
2、不管是还是vite，同前缀代理是有前后顺序的，只生效前面的
比如当你调用 :8080/api/other/
下面的写法会代理到 8888
'/api': 'http://localhost:8888',
'/api/other': 'http://localhost:88'
下面的写法会代理到 88
'/api/other': 'http://localhost:88',
'/api': 'http://localhost:8888'
接口调用
const REQUEST_PRE = '/api'
axios.get({url: `${REQUEST_PRE}/getData`
}).then(res=>{console.log(res)
})
3、：对象/函数，重写目标的 url 路径。对象键将用作正则表达式来匹配路径。
// 重写路径
pathRewrite: { '^/old/api' : '/new/api' }// 删除路径
pathRewrite: { '^/remove/api' : '' }// 添加基本路径
pathRewrite: { '^/' : '/basepath/' }// 自定义重写
pathRewrite: function ( path , req ) { return path . 替换（'/api' ， '/base/api' ） }// 自定义重写，返回 Promise
pathRewrite: async function ( path , req ) { const should_add_something = await httpRequestToDecideSomething ( path ) ; if ( should_add_something ) path += "something" ; 返回 路径；
}
Proxy文档参考地址
.env. 是 node 的全局变量，并且 有 env 这个属性，但是没有 这个属性这个变量并不是 .env 直接就有的，而是通过设置得到的。这个变量的作用是：我们可以通过判断这个变量区分开发环境或生产环境。当我们设置 mode 为 或者 时，会自动的进行一些设置
mode: development --> process.env.NODE_ENV = development
mode: production --> process.env.NODE_ENV = production
默认情况下 --> .env. =
