element 中文件上传——upload组件

2024-03-05 14:59:24

vue+element 文件操作

作者：一粒尘土  时间：2019-3-17  注：以下操作针对 vue-cli

目录

使用

  • 使用npm安装Element-ui 依赖
    $ npm i element-ui -S
  • 配置vue中的 main.js 文件中添加如下代码
    import ElementUI from 'element-ui' // 引入element import 'element-ui/lib/theme-chalk/index.css' // 引入css样式 Vue.use(ElementUI) // 中间件全局注册

组件常用参数

参数 说明 类型 可选值 默认值
action 必选参数，上传的地址 string - -
multiple 是否支持多选文件 boolean - -
data 上传时附带的额外参数 object - -
accept 接受上传的文件类型 string - -
on-preview 点击文件列表中已上传的文件时的钩子 function(file) - -
on-remove 文件列表移除文件时的钩子 function(file, fileList) - -
on-success 文件上传成功时的钩子 function(response, file, fileList) - -
on-error 文件上传失败时的钩子 function(err, file, fileList) - -
on-progress 文件上传时的钩子 function(event, file, fileList) - -
on-change 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 function(file, fileList) - -
before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传 function(file) - -
before-remove 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传 function(file, fileList) - -
auto-upload 是否在选取文件后立即进行上传 boolean - true
file-list 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] array - []
limit 最大允许上传个数 number - -

组件常用方法

参数 说明 参数
clearFiles 清空已上传的文件列表（该方法不支持在 before-upload 中调用） -

文件上传

在进行文件上传时，因为需要的不同，所以可分为 即时上传，延时上传 两种情况

即时上传：选中文件之后立即上传

说明：文件上传时action属性为文件上传的地地址，如果上传文件时需要携带参数，可放在data属性中（对象格式）

<el-upload
  class="upload-demo"
  ref="upload"
  action="/jgxf/System/fileUpload.mvc" // 上传文件的地址
  :on-change="getFiles" // 文件改变时调用的钩子函数
  multiple // 是否支持上传多条文件
  :data="addFilesDate" // 上传文件时携带的参数
  :file-list="fileList"> // 上文文件的列表
  <el-button size="small" type="primary">选择文件</el-button>
</el-upload>

延时上传：可用于表单操作时传递文件，在表单信息保存完毕后上传文件操作

说明：延时上传需要依靠auto-upload属性来设置文件是否即时上传，默认值为 true,如果设置为false时，选择文件之后不会上传文件，我们可在需要上传文件时调用如下方法即可上传文件

$ this.$refs.upload.submit() // 上传文件操作
<el-upload
  class="upload-demo"
  ref="upload"
  action="/jgxf/System/fileUpload.mvc"
  :on-change="getFiles"
  multiple
  :data="addFilesDate"
  :file-list="fileList"
  :auto-upload="false"">
  <el-button size="small" type="primary">选择文件</el-button>
</el-upload>

上传文件格式限制

在上传文件附件的时候，因为需求不同，所以对于文件格式的限制也有所不同，在这里可以使用accept(接收文件类型)，但是仅仅使用该属性并不能完全限制用户的选择，此时我们可以结合 before-upload函数来进行限制，如此即可真正的限制文件上传时的格式限制

<el-upload
  class="upload-demo"
  ref="upload"
  action="/jgxf/System/fileUpload.mvc"
  :on-change="getFiles"
  :before-upload="beforeUpload" // 文件上传前的回调
  multiple
  :accept=".doc, .docx, .xls, .xlsx" // 接收的文件类型
  :data="addFilesDate"
  :file-list="fileList">
  <el-button size="small" type="primary">选择文件</el-button>

添加：我在这里写了个方法，可以在before-upload函数中调用 this.fileUploadSuffix(fileList, suffix)，来判断用户选择的问价是否是符合后缀的，代码如下

/**
 * 文件上传 限制格式
 * @param fileList 文件列表（ 数组）
 * @param suffix 文件格式限制（字符串）".doc, .docx, .wps"
 * @param blooean 返回值
 */
Vue.prototype.fileUploadSuffix = function (fileList, suffix) {
  let blooean = null
  for (let i in fileList) {
    let item = fileList[i] // 某一条文件信息
    let fileName = item.name.lastIndexOf('.') // 取到文件名开始到最后一个点的长度
    let fileNameLength = item.name.length // 取到文件名长度
    let hz = item.name.substring(fileName + 1, fileNameLength) // 获取上传文件的后缀名
    // 判断文件名后缀是否合法
    if (suffix.indexOf(hz) === -1) { // 不合法上传文件
      // 删除上传的文件列表中的不合法文件类型
      fileList.splice(i--, 1) // 删除列表中的数据（删除后文件调整）
      // 弹窗显示判断
      blooean = true
    }
  }
  return blooean // 返回参数
}

回显文件

根据element文档可知，储存文件上传的属性为 fileList ，我们只需将接受的参数，按照fileList的name属性附上值，即可回显我们需要的格式，当然我们也可以添加替他属性，用来进行下载删除等操作

属性值 参数
name 文件名称
url 文件上传的路径

下载文件

在element的 upload 组件中有一个属性可让我们用来进行文件的下载 on-preview(点击文件列表中已上传的文件时的钩子)，然后在该函数中调用window.open(url) 方法 url 下载文件的地址

删除文件

在页面回显之后，也会有删除文件的操作，此时我们可以使用该组件中的 on-remove(文件列表移除文件的操作)属性 ，再调用该参数的时候文件列表中的数据将会被删除，这种效果并不是很好，由此我们可以使用 before-remove 来进行删除文件的操作，如果用户选择确定删除时，我们再去调用删除文件的接口，在删除成功之后，我们在进行页面上列表的屋里删除，就好了

<!--html代码-->
<el-upload
  :befor-remove="beforRemove"
  ></el-upload>

<!--js代码-->
beforeRemove (file, fileList) {
  this.$alert(`确定移除该文件？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    this.deleteFile(file, fileList)
  }).catch(() => {
    this.$message({
      type: 'info',
      message: '取消删除操作'
    })
  })
  return false
},
deleteFile (file, fileList) {
  let file = file
  let fileList = fileList // 接收文件
  this.post(() => {
    url: '', // 删除文件的接口
    data: {} // 传递的参数
  }, (res) => {
    // 删除成功，更新页面中的文件列表信息
  })
}
上一篇：Springboot + Vue + elementUI 文件上传


下一篇：vue element-ui Upload 上传文件图片再次封装