Vue Element-ui文件上传组件如何实现高效且详细的实例教学？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1671个文字，预计阅读时间需要7分钟。
目录+引言+单文件上传+和表单单一上传+需求：要求：需要同时给后端传输文件FormData和其他所需参数+数据的编码格式+补充：代理的使用+什么是代理？为什么要用代理？代理的使用+process.env.NODE_ENV
目录
- 引言
- 单文件上传
- 和表单一起上传
- 需求：需同时给后端传文件FormData和其他所需参数
- 数据的编码方式
- 补充：代理的使用
- 什么是代理？为什么要用代理
- 代理的使用
- process.env.NODE_ENV
- 总结
引言
对于文件上传，在开发主要涉及到以下两个方面：
单个文件上传和表单一起实现上传（这种情况一般都是文件上传之后，后端返回保存在服务器的文件名，最后和我们的表单一起上传）
单文件上传
element-ui中的el-upload组件默认发送post请求，在使用upload组件自动携带的请求方式发送。因此详情可参考elenent-ui官网 Element-UI官网
以下使用手动上传着重介绍一下el-upload的一部分属性参数
<el-upload class="upload-demo" ref="upload" action="jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :auto-upload="false" list-type="picture"> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> </el-upload> <script> export default { data() { return { fileList: [] }; }, methods: { handleRemove(file, fileList) { console.log(file, fileList); }, handlePreview(file) { console.log(file); }, submitUpload() { this.$refs.upload.submit(); }, } } </script>
- data 上传时可携带的参数，这里后台用map接收
- file-list 上传的文件列表, 例如: [{name: ‘food.jpg’, url: ‘xxx.cdn.com/xxx.jpg’}]
- on-success 上传成功之后的钩子，可以用来清除表单校验和文件列表
- on-error 上传失败之后的钩子
- auto-upload 是否在选取文件后立即进行上传,默认为true，会自动上传，false取消自动上传
- list-type 文件列表的类型 text/picture/picture-card 默认text
- on-preview 点击文件列表中已上传的文件时的钩子
- on-change 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
- slot=“trigger” 触发文件选择框的内容
- slot=“tip” 提示说明文字
和表单一起上传
需求：需同时给后端传文件FormData和其他所需参数
实现方法一：
关键点：el-upload的localhost:88', changeOrigin: true, secure: false, pathRewrite: { ['^' + process.env.VUE_APP_BASE_API]: '' } }, }
而这个值在开发环境中是"/dev-api",在生产环境是“/”
所以开发环境需要在开头加上"/dev-api"，生产环境则不需要
那为什么只有这一个要单独处理，其他的url不需要呢？因为其他的url是通过axios请求的，axios中配置了baseUrl，所以其他的url不需要单独处理了
什么是代理？为什么要用代理
因为开发环境是配置了代理的,代理就是通过一个特殊的网络服务去访问另一个网络服务的一种间接访问方式。像我们不能直接访问国外的网站，只能使用VPN，就是是使用了代理。
那么前端为什么要代理？
- 前端应用的要能访问，那必须是放在服务器上，（服务器可以是nginx、node.js、apache、tomcat等），我们本地vue开发就是用nodejs启动了一个服务。
- 由于浏览器的同源策略（协议，IP，端口号都相同为同源），禁止网站向非同源的服务器发送ajax异步请求，也就是跨域。
因此使用代理来解决跨域问题
代理的使用
Vue代理配置
vuecli3的代理设置在vue.config.js->devServer->proxy
vite构建的vue代理设置在 vite.config.js->server->proxy
（Vite 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个 基于原生 ES-Module 的前端构建工具）
他们的代理配置是一样的，这里以vuecli3为例:
const REQUEST_PRE = "/api" module.exports = { // 其他配置省略 // 本地代理配置 devServer: { // 默认是false，可以将localhost:8080 变为 localhost:8080 localhost:80', ws: true, // 允许websocket代理 changeOrigin: true //允许跨域 }, // 变量写法 [REQUEST_PRE]: { target: 'localhost:88', ws: true, changeOrigin: true }, // 重写，当访问localhost:80/req/getData // 实际上访问的是 localhost:8888/module/getData '/req': { target: 'localhost:8888', pathRewrite: path => path.replace('/req', '/module'),//replace方法返回一个替换好的新的字符串 ws: true, changeOrigin: true }, }, open: true } }
注意（坑点）：
1、后面的反斜杠要保持一致，虽然对接口调用没有影响，但是对代理文件的相对路径有影响
如 /req，target就写 localhost:8888
如 /req/，target就写 localhost:8888/
2、不管是vuecli还是vite，同前缀代理是有前后顺序的，只生效前面的
比如当你调用 localhost:8080/api/other/getData
下面的写法会代理到 8888
'/api': 'localhost:8888', '/api/other': 'localhost:88'
下面的写法会代理到 88
'/api/other': 'localhost:88', '/api': 'localhost:8888'
接口调用
const REQUEST_PRE = '/api' axios.get({ url: `${REQUEST_PRE}/getData` }).then(res=>{ console.log(res) })
3、pathRewrite：对象/函数，重写目标的 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文档参考地址
process.env.NODE_ENV
- process 是 node 的全局变量，并且 process 有 env 这个属性，但是没有 NODE_ENV 这个属性
- NODE_ENV这个变量并不是 process.env 直接就有的，而是通过设置得到的。这个变量的作用是：我们可以通过判断这个变量区分开发环境或生产环境。
- 当我们设置 mode 为 development 或者 production时，webpack会自动的进行一些设置
mode: development --> process.env.NODE_ENV = development mode: production --> process.env.NODE_ENV = production
默认情况下 --> process.env.NODE_ENV = production
总结
到此这篇关于VUE学习之Element-ui文件上传详解的文章就介绍到这了,更多相关VUEElement-ui文件上传内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！
本文共计1671个文字，预计阅读时间需要7分钟。
目录+引言+单文件上传+和表单单一上传+需求：要求：需要同时给后端传输文件FormData和其他所需参数+数据的编码格式+补充：代理的使用+什么是代理？为什么要用代理？代理的使用+process.env.NODE_ENV
目录
- 引言
- 单文件上传
- 和表单一起上传
- 需求：需同时给后端传文件FormData和其他所需参数
- 数据的编码方式
- 补充：代理的使用
- 什么是代理？为什么要用代理
- 代理的使用
- process.env.NODE_ENV
- 总结
引言
对于文件上传，在开发主要涉及到以下两个方面：
单个文件上传和表单一起实现上传（这种情况一般都是文件上传之后，后端返回保存在服务器的文件名，最后和我们的表单一起上传）
单文件上传
element-ui中的el-upload组件默认发送post请求，在使用upload组件自动携带的请求方式发送。因此详情可参考elenent-ui官网 Element-UI官网
以下使用手动上传着重介绍一下el-upload的一部分属性参数
<el-upload class="upload-demo" ref="upload" action="jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :auto-upload="false" list-type="picture"> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> </el-upload> <script> export default { data() { return { fileList: [] }; }, methods: { handleRemove(file, fileList) { console.log(file, fileList); }, handlePreview(file) { console.log(file); }, submitUpload() { this.$refs.upload.submit(); }, } } </script>
- data 上传时可携带的参数，这里后台用map接收
- file-list 上传的文件列表, 例如: [{name: ‘food.jpg’, url: ‘xxx.cdn.com/xxx.jpg’}]
- on-success 上传成功之后的钩子，可以用来清除表单校验和文件列表
- on-error 上传失败之后的钩子
- auto-upload 是否在选取文件后立即进行上传,默认为true，会自动上传，false取消自动上传
- list-type 文件列表的类型 text/picture/picture-card 默认text
- on-preview 点击文件列表中已上传的文件时的钩子
- on-change 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
- slot=“trigger” 触发文件选择框的内容
- slot=“tip” 提示说明文字
和表单一起上传
需求：需同时给后端传文件FormData和其他所需参数
实现方法一：
关键点：el-upload的localhost:88', changeOrigin: true, secure: false, pathRewrite: { ['^' + process.env.VUE_APP_BASE_API]: '' } }, }
而这个值在开发环境中是"/dev-api",在生产环境是“/”
所以开发环境需要在开头加上"/dev-api"，生产环境则不需要
那为什么只有这一个要单独处理，其他的url不需要呢？因为其他的url是通过axios请求的，axios中配置了baseUrl，所以其他的url不需要单独处理了
什么是代理？为什么要用代理
因为开发环境是配置了代理的,代理就是通过一个特殊的网络服务去访问另一个网络服务的一种间接访问方式。像我们不能直接访问国外的网站，只能使用VPN，就是是使用了代理。
那么前端为什么要代理？
- 前端应用的要能访问，那必须是放在服务器上，（服务器可以是nginx、node.js、apache、tomcat等），我们本地vue开发就是用nodejs启动了一个服务。
- 由于浏览器的同源策略（协议，IP，端口号都相同为同源），禁止网站向非同源的服务器发送ajax异步请求，也就是跨域。
因此使用代理来解决跨域问题
代理的使用
Vue代理配置
vuecli3的代理设置在vue.config.js->devServer->proxy
vite构建的vue代理设置在 vite.config.js->server->proxy
（Vite 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个 基于原生 ES-Module 的前端构建工具）
他们的代理配置是一样的，这里以vuecli3为例:
const REQUEST_PRE = "/api" module.exports = { // 其他配置省略 // 本地代理配置 devServer: { // 默认是false，可以将localhost:8080 变为 localhost:8080 localhost:80', ws: true, // 允许websocket代理 changeOrigin: true //允许跨域 }, // 变量写法 [REQUEST_PRE]: { target: 'localhost:88', ws: true, changeOrigin: true }, // 重写，当访问localhost:80/req/getData // 实际上访问的是 localhost:8888/module/getData '/req': { target: 'localhost:8888', pathRewrite: path => path.replace('/req', '/module'),//replace方法返回一个替换好的新的字符串 ws: true, changeOrigin: true }, }, open: true } }
注意（坑点）：
1、后面的反斜杠要保持一致，虽然对接口调用没有影响，但是对代理文件的相对路径有影响
如 /req，target就写 localhost:8888
如 /req/，target就写 localhost:8888/
2、不管是vuecli还是vite，同前缀代理是有前后顺序的，只生效前面的
比如当你调用 localhost:8080/api/other/getData
下面的写法会代理到 8888
'/api': 'localhost:8888', '/api/other': 'localhost:88'
下面的写法会代理到 88
'/api/other': 'localhost:88', '/api': 'localhost:8888'
接口调用
const REQUEST_PRE = '/api' axios.get({ url: `${REQUEST_PRE}/getData` }).then(res=>{ console.log(res) })
3、pathRewrite：对象/函数，重写目标的 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文档参考地址
process.env.NODE_ENV
- process 是 node 的全局变量，并且 process 有 env 这个属性，但是没有 NODE_ENV 这个属性
- NODE_ENV这个变量并不是 process.env 直接就有的，而是通过设置得到的。这个变量的作用是：我们可以通过判断这个变量区分开发环境或生产环境。
- 当我们设置 mode 为 development 或者 production时，webpack会自动的进行一些设置
mode: development --> process.env.NODE_ENV = development mode: production --> process.env.NODE_ENV = production
默认情况下 --> process.env.NODE_ENV = production
总结
到此这篇关于VUE学习之Element-ui文件上传详解的文章就介绍到这了,更多相关VUEElement-ui文件上传内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！