element中文件上传

时间：2024-10-30 09:06:08

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="/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="/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="/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) => {

    // 删除成功，更新页面中的文件列表信息

  })

}

欢迎大家关注我的微信公众号，一起学习一起进步

element中文件上传代码小书生

相关文章