kl-uploads 多文件上传与预览的实现

功能描述

多文件的上传，图片添加预览功能，非图片只有名称列表

使用

<template><div class="demo"><klUploadhideFooterref="klUploadRef"preview@fileChange="fileChange"@getFiles="getFiles":limit="3"/></div>
</template><script>
import axios from 'axios';
export default {name: 'demo',components: {},data() {return {url: 'http://127.0.0.1:5000/ceshi/files'};},methods: {// 每次有变化都会返回的fileChange(fileOptions) {console.log('每次上传文件变化时的返回--', fileOptions);},// 使用了组件内部的确定返回的async getFiles(fileOptions) {let param = new FormData();fileOptions.forEach((item) => {param.append('file', item.file);});let data = await axios({method: 'post',url: this.url,data: param,headers: {'Content-Type': 'multipart/form-data'}});console.log(data.data);this.$message.success(data.data.msg);this.$refs.klUploadRef.clear();}}
};
</script>

实现

<template><div class="kl-upload"><input@change="fileChange"ref="inputRef"class="kl-upload-file"type="file"multiple="multiple"/><el-button size="mini" type="primary" @click="handleUploadFile">选择文件上传</el-button><ul><transition-group name="list"><li v-for="item in fileOptions" :key="item.fileName"><imgv-if="preview":src="item.preview":title="item.fileName":alt="item.fileName"/><p v-if="!item.preview">{{ item.fileName }}</p><i class="el-icon-delete-solid" @click="deleteFile(item.id)"> </i></li></transition-group></ul><div class="upload-footer" v-show="fileOptions.length > 0 && !hideFooter"><el-button size="mini" type="success" @click="beginUpload">确定</el-button><el-button size="mini" type="info" @click="cancel">清空</el-button></div></div>
</template><script>
export default {name: 'kl-upload',components: {},props: {hideFooter: {// 隐藏底部的提交操作type: Boolean,default: false},preview: {// 是否开启预览type: Boolean,default: false},fileName: {// 文件的上传名type: String,default: 'file'},limit: {// 限制上传文件的个数  ---这儿做简化处理，无论是单选还是多选，都使用多选上传的方式type: Number,default: 1},allowTypes: {// 允许提交的文件类型type: Array,default: ['JPG', 'PNG']}},data() {return {multiple: null,fileOptions: [],allowTypesCopy: []};},methods: {// 清空上传信息clear() {this.fileOptions = [];// 需要重新创建，清除默认的历史记录功能 --- 删除一个文件后，再上传，会无法触发input的changethis.$refs['inputRef'].value = null;},// 取消上传cancel() {this.fileOptions = [];// 需要重新创建，清除默认的历史记录功能 --- 删除一个文件后，再上传，会无法触发input的changethis.$refs['inputRef'].value = null;},// 开始上传async beginUpload() {// 生成上传信息if (this.fileOptions.length === 0) {return this.$message.warning('请先选择上传文件');}// 点击底部确定直接返回数据this.$emit('getFiles', this.fileOptions);},// 删除file列表中的数据deleteFile(id) {this.fileOptions = this.fileOptions.filter((item) => {// console.log(this.param)return item.id !== id;});// 需要重新创建，清除默认的历史记录功能 --- 删除一个文件后，再上传，会无法触发input的changethis.$refs['inputRef'].value = null;},// 触发 文件上传handleUploadFile() {// 需要先将传递进来的文件类型先都转为小写if (this.allowTypes.length === 0) {return this.$message.error('请先传递文件类型');}this.allowTypesCopy = this.allowTypes.map((item) => {item = item.toLowerCase();return item;});this.$refs['inputRef'].click();},// 监听是否选中文件  --- 批量上传fileChange(e) {if (e.target.files && e.target.files.length > 0) {// 这儿的files拿到的都是每次新选中的let files = Array.from(e.target.files);// console.log("files", files);// 判断文件个数if (this.fileOptions.length + files.length > this.limit) {return this.$message.warning(`限制上传的最大个数为${this.limit}个,请重新选择`);}// 判断所有上传文件的文件类型是否都满足let isType = files.every((item) => {let fileNameArr = item.name.split('.');return this.allowTypesCopy.includes(fileNameArr[fileNameArr.length - 1]);});if (!isType) {let strs = this.allowTypesCopy.join(',');return this.$message.error(`只能上传${strs}文件，注意检查你的文件`);}// console.log("开始判断 --- 上传同名文件");// // 不能上传同名文件let isName = true;let someFileName = [];if (this.fileOptions.length > 0) {for (let i = 0; i < this.fileOptions.length; i++) {for (let j = 0; j < files.length; j++) {if (this.fileOptions[i].fileName === files[j].name) {someFileName.push(files[j].name);isName = false;}}}// console.log("isName", isName);if (!isName) {let strs = someFileName.join(',');return this.$message.error(`${strs},已经存在，请重新上传`);}}// 保存上传文件信息if (files && files.length > 0) {files.forEach(async (file) => {let preview = '';if (file.name) {// console.log(this.preview);if (this.preview) {try {preview = await this.createPreviewImg(file);} catch (err) {this.$message.error(err);}}// 生成最终的配置信息let fileOption = {id: Date.now() + '---' + this.createNumber(),isAllow: true,fileName: file.name,file,preview};// console.log(fileOption);this.fileOptions.push(fileOption);}});}// 当上传文件有变化直接返回数据this.$emit('fileChange', this.fileOptions);}},// 创建预览图片createPreviewImg(file) {return new Promise((res, rej) => {let fd = new FileReader(); // 本地预览fd.readAsDataURL(file); // 将图片信息解析成base64// console.log("将图片信息解析成base64");fd.onload = () => {if (fd.result.startsWith('data:image')) {// 选中的是一张图片// preview = fd.result; // 预览// console.log("preview", preview);res(fd.result);} else {rej('不是图片请关闭预览');}};});},// 生成随机数createNumber(num = 10000) {return Math.floor(Math.random() * num);}}
};
</script><style lang="scss" scoped>
.kl-upload-file {position: absolute;top: -9999px;left: -9999px;
}
ul {margin: 10px 0;
}li {width: 400px;justify-content: space-between;padding: 0 10px;display: flex;align-items: center;cursor: pointer;margin-top: 10px;&:nth-of-type(1) {margin-top: 0px;}img {height: 80px;width: 80px;}&:hover {background-color: #f5f5f5;}
}.list-enter-active,
.list-leave-active {transition: all 1s;
}
.list-enter,
.list-leave-to {opacity: 0;transform: translatex(80px);
}
</style>

kl-uploads 多文件上传与预览的实现相关推荐

php案例文件上传并预览
作者:陈业贵华为云享专家 51cto(专家博主明日之星 TOP红人) 阿里云专家博主文章目录前言代码 cyg.php 2.php 效果:也就是上传的文件里面的内容前言 php案例文件上传 ...
uploadify java 下载_uploadify java实现多文件上传和预览
本文实例为大家分享了java文件上传和预览实现代码,供大家参考,具体内容如下 1.下载uploadify插件 2.index.html #uploader { position: relative; ...
php 表格导入excel插件,BootStrap Fileinput插件和表格插件相结合实现导入Excel数据的文件上传、预览、提交的步骤...
这篇文章主要介绍了BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传.预览.提交的导入Excel数据操作步骤,需要的朋友可以参考下 bootstrap ...
servlet实现文件上传，预览，下载和删除
一.准备工作 1.1 文件上传插件:uploadify: 1.2 文件上传所需jar包:commons-fileupload-1.3.1.jar和commons-io-2.2.jar 1.3 将数据转 ...
javascript --- 文件上传即时预览闭包实现多图片即时预览
使用javascript原生功能实现,点击上传文件,然后再网页上显示出来 1. 初级显示 1.1 准备一个input标签和一个img标签 <input type=file id="fi ...
JQ input 文件上传并预览选择图片后,在页面上预览图片,页面渲染
有时候,我们更新界面信息时会遇到,选择图片后,并不能预览图片,必须提交数据库后才能在页面上显示出来,这样我们该怎样办呢? 起始jq为我们提供了两个方法change()和URL.createObject ...
minio实现大文件分片上传+断点续传+预览
minio实现大文件分片上传+断点续传+预览只提供后端java代码思路: 前端分片校验文件md5是否已经存在 --不存在创建临时桶存分片校验分块是否已经上传分块上传合并分块校验合成后md ...
php+jquery实现图片上传预览_和拖动位置值,PHP教程：thinkphp jquery实现图片上传和预览效果...
<PHP教程:thinkphp jquery实现图片上传和预览效果>要点: 本文介绍了PHP教程:thinkphp jquery实现图片上传和预览效果,希望对您有用.如果有疑问,可以联系我 ...
Ajax实现图片上传并预览
效果见尾部. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 ...

kl-uploads 多文件上传与预览的实现

功能描述

使用

实现

kl-uploads 多文件上传与预览的实现相关推荐

最新文章

热门文章