el-upload php,el-upload组件说明汇总，实现上传、点击下载、删除功能等

class="upload-demo"

action="/admin/sys-file/upload" //文件上传路径

:headers="headers" //请求头配置信息

:file-list="fileList" //上传的文件显示列表, 格式如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]

:limit="5" //设置最大允许上传个数

:on-exceed="handleExceed" //文件超出个数限制时的钩子

accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx" //接受上传的文件类型

:before-upload="beforeUpload" //上传文件之前的钩子,判断文件大小和格式是否符合

:on-remove="handleRemove" //文件列表移除文件时的钩子

:on-preview="handlePreview" //点击文件列表中已上传的文件时的钩子

:on-success="handleSuccess">

上传文件

最多可上传5个，文件大小不超过50MB

import store from '@/store'

data() {

return {

fileList:[],

headers: {

Authorization: 'Bearer ' + store.getters.access_token,

'TENANT-ID': '1564020210'

}

},

methods: {

//点击文件列表中已上传文件进行下载

handlePreview(file) {

var a = document.createElement('a');

var event = new MouseEvent('click');

a.download = file.name;

a.href = file.url;

a.dispatchEvent(event);

console.log(file)

},

//上传文件大小和格式校验

beforeUpload(file){

var fileType =file.name.substring(file.name.lastIndexOf('.')+1)

const isFile =

fileType === "doc" ||

fileType === "docx" ||

fileType === "xls" ||

fileType === "xlsx" ||

fileType === "ppt" ||

fileType === "pptx"

if (!isFile) {

this.$message.error("请选择正确的文件格式")

return false

}

const isLt50M = file.size / 1024 / 1024 < 50

if (!isLt50M) {

this.$message.error("上传图片大小不能超过 50MB!")

}

return isLt50M && isFile

},

//文件超出限制个数提示

handleExceed(files, fileList) {

this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);

},

//上传成功

handleSuccess(res, file, fileList){

let fileSize=res.data.fileSize/1024/1024

this.fileList.push({

name: file.name,

fileSize:fileSize,

url: res.data.bucketName + '/' + res.data.fileName

})

console.info(fileList,"fileList")

},

//文件移除操作

handleRemove(file, fileList){

console.info(file,"file")

this.fileList=fileList

},

//点击文件列表中已上传文件进行下载

handlePreview(file) {

var a = document.createElement('a');

var event = new MouseEvent('click');

a.download = file.name;

a.href = file.url;

a.dispatchEvent(event);

console.log(file)

},

}

一、限制上传文件个数

可通过设置limit和on-exceed来限制上传文件的个数和定义超出限制时的行为。

二、 限制上传的图片格式和大小

使用 before-upload 限制用户上传的图片格式和大小。

三、点击已上传文件进行下载

实现这个功能主要用到element的on-preview钩子函数