element file文件 附件上传_element中文件上传

javascript

技术文章

开发

element中文件上传

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属性中(对象格式)

class="upload-demo"

ref="upload"

action="/System/fileUpload.mvc" // 上传文件的地址

:on-change="getFiles" // 文件改变时调用的钩子函数

multiple // 是否支持上传多条文件

:data="addFilesDate" // 上传文件时携带的参数

:file-list="fileList"> // 上文文件的列表

选择文件

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

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

$ this.$refs.upload.submit() // 上传文件操作

class="upload-demo"

ref="upload"

action="/System/fileUpload.mvc"

:on-change="getFiles"

multiple

:data="addFilesDate"

:file-list="fileList"

:auto-upload="false"">

选择文件

上传文件格式限制

在上传文件附件的时候，因为需求不同，所以对于文件格式的限制也有所不同，在这里可以使用accept(接收文件类型)，但是仅仅使用该属性并不能完全限制用户的选择，此时我们可以结合 before-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">

选择文件

添加：我在这里写了个方法，可以在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 来进行删除文件的操作，如果用户选择确定删除时，我们再去调用删除文件的接口，在删除成功之后，我们在进行页面上列表的屋里删除，就好了

:befor-remove="beforRemove"

>

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

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

})

}

内容来源于网络，如有侵权请联系客服删除