发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

el-upload 文件上传组件的使用讲解

初夏之晨

3

主题

3

帖子

9

积分

新手上路

Rank: 1

积分
9
显示全部楼层

Upload 上传文件

element-ui官网
element ui=>upload上传组件
Upload 上传文件这个功能是我们在企业实际开发当中使用频率是非常高的这样一个文件上传的功能，，element ui组件组也给我们提供了上传的组件。所有我们一定要熟悉掌握它

使用之前先进行一下element ui的安装和配置
打开终端=>输入npm i element-ui -S
  1. npm i element-ui -S
复制代码
就拿其中的一个拖拽上传一个例子进行说说吧


el-upload拖拽上传官网源代码
  1. <el-upload
  2.   class="upload-demo"
  3.   drag
  4.   action="https://jsonplaceholder.typicode.com/posts/"
  5.   multiple>
  6.   <i class="el-icon-upload"></i>
  7.   <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  8.   <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
  9. </el-upload>
复制代码
接下来咱们就创建一个vue组件进行使用和讲解
1.先搭建一个vue项目
vue项目搭建可以参考这篇文章
2.使用element-ui和创建vue组件
配置element-ui
main.js
  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import './registerServiceWorker'
  4. import router from './router'
  5. import store from './store'
  6. // 引入element ui
  7. import ElementUI from 'element-ui';
  8. import 'element-ui/lib/theme-chalk/index.css';
  9. Vue.config.productionTip = false
  10. Vue.use(ElementUI);
  11. new Vue({
  12.   el: '#app',
  13.   router,
  14.   store,
  15.   render: h => h(App)
  16. })
复制代码
创建一个组件，用于放el-upload
upload.vue,首先先把element的组件放进来，接下来再进行更改配置
  1. <template>
  2.   <div>
  3.     <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
  4.       <i class="el-icon-upload"></i>
  5.       <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  6.       <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
  7.     </el-upload>
  8.   </div>
  9. </template>
  10. <script>
  11. export default {
  12.   data() {
  13.     return {
  14.     }
  15.   }
  16. }
  17. </script>
  18. <style scoped></style>
复制代码
展示upload组件，为了方便我就不配置路由了，直接在App.vue引入展示
App.vue
  1. <template>
  2.   <div id="app">
  3.     <uploadView/>
  4.   </div>
  5. </template>
  6. <script>
  7. // 引入创建的upload.vue组件
  8. import uploadView from './views/upload.vue'
  9. export default{
  10.   components:{
  11.     uploadView
  12.   }
  13. }
  14. </script>
  15. <style scope>
  16. </style>
复制代码
首次展示效果

el-upload参数讲解
文件上传
使用el-upload组件完成，action 是后端地址，是后端请求的接口地址。
常用参数：

  • action 后台路径，前端负责手机，然后传给后台，比如存到数据库等等
  • div class=“el-upload__text”
  • div class=“el-upload__tip” slot=“tip”
div的文字自己根据需求可以自行更改

图片上传

imgUpload图片上传组件封装
  1. <template>
  2.   <div>
  3.     <!-- 图片上传 -->
  4.     <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
  5.       :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
  6.       <img v-if="imageUrl" :src="imageUrl" class="avatar">
  7.       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  8.     </el-upload>
  9.   </div>
  10. </template>
  11. <script>
  12. export default {
  13.   data() {
  14.     return {
  15.       imageUrl: ''
  16.       // 接受我们上传图片的地址，上传成功以后给的地址
  17.     };
  18.   },
  19.   methods: {
  20.     // 上传成功的回调
  21.     handleAvatarSuccess(res, file) {
  22.       //demo 转换成url，后期可以换成后端给我们返回的地址
  23.       this.imageUrl = URL.createObjectURL(file.raw);
  24.       // 转化可以显示页面的地址，其实正常开发中已经可以拿到后端返回的地址，可以直接使用的
  25.     },
  26.     // 上传之前的回调
  27.     beforeAvatarUpload(file) {
  28.       // isJPG图片格式是否符合我们的规定
  29.       const isJPG = file.type === 'image/jpeg';
  30.       // isLt2M 文件大小是否符合我们的规定
  31.       const isLt2M = file.size / 1024 / 1024 < 2;
  32.       if (!isJPG) {
  33.         this.$message.error('上传头像图片只能是 JPG 格式!');
  34.       }
  35.       if (!isLt2M) {
  36.         this.$message.error('上传头像图片大小不能超过 2MB!');
  37.       }
  38.       return isJPG && isLt2M;
  39.     }
  40.   }
  41. }
  42. </script>
  43. <style scoped>
  44. /* 图片上传样式 */
  45. .avatar-uploader .el-upload {
  46.   border: 1px dashed #d9d9d9;
  47.   border-radius: 6px;
  48.   cursor: pointer;
  49.   position: relative;
  50.   overflow: hidden;
  51. }
  52. .avatar-uploader .el-upload:hover {
  53.   border-color: #409EFF;
  54. }
  55. .avatar-uploader-icon {
  56.   font-size: 28px;
  57.   color: #8c939d;
  58.   width: 178px;
  59.   height: 178px;
  60.   line-height: 178px;
  61.   text-align: center;
  62. }
  63. .avatar {
  64.   width: 178px;
  65.   height: 178px;
  66.   display: block;
  67. }
  68. </style>
复制代码
把App.vue展示的组件替换为我们的imgUpload组件
  1. <template>
  2.   <div id="app">
  3.     <!-- 文件上传 -->
  4.     <!-- <uploadView/> -->
  5.     <!-- 图片上传 -->
  6.     <imgUpload/>
  7.   </div>
  8. </template>
  9. <script>
  10. // 引入创建的upload.vue组件
  11. // 文件上传
  12. import uploadView from './views/upload.vue'
  13. // 图片上传
  14. import imgUpload from './views/imgUpload.vue'
  15. export default{
  16.   components:{
  17.     uploadView,
  18.     imgUpload
  19.   }
  20. }
  21. </script>
  22. <style>
  23. </style>
复制代码
el-upload 常用属性

  • action可以根据我们的需求改为后端地址
  • headers 设置上传的请求头部
  • method 设置上传请求方法
  • multiple 是否支持多选文件
  • disabled 是否禁用上传
  • data 上传时附带的额外参数
  • name 上传的文件字段名
  • limit 允许上传文件的最大数量
  • with-credentials 支持发送cookie凭证信息
  • show-file-list 是否显示已上传文件列表
  • accept 接受上传的文件类型
  • drag 是否启用拖拽上传
  • on-success 上传成功的回调
  • before-upload 准备上传的回调
  • list-type列表展示的形式或者类型 text/picture/picture-card
  • list-type: 文件列表的类型，‘text’ | ‘picture’ | ‘picture-card’。
  • auto-upload 是否自动上传文件
  • file-list/v-model:file-list 默认上传文件
  • http-request 覆盖默认的 Xhr 行为，允许自行实现上传文件的请求
  • on-success 文件上传成功时的钩子
  • on-error 文件上传失败时的钩子
  • on-progress 文件上传时的钩子
  • on-change 文件状态改变时的钩子，添加，上传成功和失败都会被调用
  • on-exceed 当超出限制时执行的钩子
  • before-upload 文件上传之前的钩子，参数为上传的文件， 若返回false或者返回 Promise 且被 reject，则停止上传。
  • before-remove 删除文件之前的钩子，参数为上传的文件和文件列表， 若返回 false 或者返回 Promise 且被 reject，则停止删除。
  • abort 取消上传请求
  • submit 手动上传文件列表
  • clearFiles 清空已上传的文件列表（该方法不支持在 before-upload 中调用）
  • handleStart 手动选择文件
  • handleRemove 手动移除文件。 file 和rawFile 已被合并。
  • on-preview 查看按钮=>对应一个回调，回调参数对应我们当前点击的文件 官方点击文件列表中已上传的文件时的钩子
  1. handlepreview (file)
复制代码
on-remove 删除按钮=>对应一个回调，回调参数对应我们当前点击的删除的文件和剩余的文件列表 文件列表移除文件时的钩子
  1. handleremove (file,filelist)
复制代码
更多的查看官网即可
踩坑

  • 设置了Content-Type: multipart/form-data;此时请求一直没有随机数boundary=----WebKitFormBoundarypzSlbADtTRuFx5FC。
  • 如果设置了全局的content-type,会发现上传接口设置multipart/form-data是不起作用的，因为没有Boundary，所以上传必定失败，服务器500。
  • 然后尝试手动添加Boundary，这次错误变400了
  • 后来通过查询资料，说不用设置Content-Type: multipart/form-data;只要参数是formData形式，浏览器就会自动将请求头的Content-Type转成Content-Type: multipart/form-data; boundary=----WebKitFormBoundarypzSlbADtTRuFx5FC。
  • 但是我不设置的话就是默认的application/json。
  • 于是查阅资料发现axios的transformRequest属性可以在向服务器发送请求数据之前修改请求数据，因为我们的请求在默认的post请求方式时Content-Type的值是application/json，需要去掉默认的值，这样浏览器就可以自动添加了。
  1.   globObj.$axios({
  2.     url: url,
  3.     method: 'post',
  4.     transformRequest: [function(data, headers) {
  5.       // 去除post请求默认的Content-Type
  6.       delete headers['Content-Type']
  7.       return data
  8.     }],
  9.     data: formData,
  10.     timeout: 300000
  11.   }).then(res => {
  12.     ElMessage.success('资产添加成功');
  13.   }).catch((err) => {
  14.     console.log(err);
  15.   });
复制代码
如果还要传其他的参数，其他的参数必须也要append进去，否则可能会报参数错误。
  1. const formData = new FormData();
  2. formData.append('file', file);
  3. // 其他参数
  4. formData.append('mailSys', mailSys);
复制代码
到此这篇关于el-upload 文件上传组件的使用的文章就介绍到这了,更多相关el-upload 上传组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/316236hw4.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

上一篇: vue2.0+elementui实现一个上门取件时间组件

下一篇: vue3页面组件中怎么获取上一个页面的路由地址

发表于 2024-2-27 14:27:37

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4