<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" //上传文件之前的钩子,判断文件大小和格式是否符合
:before-remove="beforeRemove" //删除文件之前的钩子,若返回 false 或者返回 Promise 且被 reject，则停止删除停止执行handleRemove事件
:on-remove="handleRemove" //文件列表移除文件时的钩子
:on-preview="handlePreview" //点击文件列表中已上传的文件时的钩子
:on-success="handleSuccess">
<el-button size="small" type="primary">上传文件</el-button>
<div slot="tip" class="el-upload__tip">最多可上传5个，文件大小不超过50MB</div>
</el-upload>
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")
},
//文件移除操作
beforeRemove(file, fileList) {
if(this.status=='view'){
this.$message.warning('不允许删除！')
return false
}else{
return true
}
},
//文件移除操作
handleRemove(file, fileList){
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钩子函数
四、查看时，不允许删除文件
主要用到before-remove 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false ，则停止删除，不在执行:on-remove="handleRemove"事件。
五、查看编辑显示后台保存已上传文件
查看和编辑按钮事件如下： 只需将存入后台的数据再放入this.fileList数组中即可。
rowEditForm(row, index){
this.fileList=[]
getFileList(row.id).then(res=>{
var data= res.data.data
if(data!=null&&data.length>0){
for(var i=0;i<data.length;i++){
this.fileList.push({
name: data[i].name,
fileSize:data[i].fileSize,
url: data[i].url
})
}
}
})
}
