接上回《Plupload插件》，已经尝试将Plupload插件引入到HTML页面中，并进行参数配置，然后联合后端接口进行调试，完成了文件上传的工作。但是在Vue项目的开发中，我们更想将它封装成一个可复用的Vue组件，在使用的时候，只需要快捷引入，并配置参数与回调函数即可。
有兴趣的小伙伴可以也可点击此处，从Gitee上直接拉取项目源码运行。

调用方式

使用自定义的FileUploader组件时，调用方式如下。

<template><div class="home"><!-- 文件上传组件 --><FileUploader:url="url":params="params":mime_types="mimeTypes":max_file_size="maxFileSizeLimit"@whenUpload="whenUpload"@successCallBackLater="uploadCallBack"@errorCallBackLater="errorCallBack"/></div>
</template><script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
//导出文件上传组件
import FileUploader from "@/components/fileTools/FileUploader";export default {name: "home",components: {//注册组件FileUploader,},data() {return {//这里是后端接口-可参考前一篇文章的示例代码url: "http://localhost:8099/sci_web/upload",//params参数对应后端编写的JavaBean/pojo类对象+属性值params: {username: "小张",password: "258596",role: 0,state: 1,},mimeTypes: "image/*,audio/*,video/*,text/*,application/zip", //MIME类型-默认支持文本/图像/音视频/二进制压缩包maxFileSizeLimit: 1024,};},methods: {//以下三个函数是暴露出来的回调函数接口whenUpload(msg) {console.log(msg);},uploadCallBack(uploader, file, responseObject) {console.log(responseObject);},errorCallBack(uploader, error) {console.log(error);},},
};
</script>

组件封装源码

FileUploader组件简介

组件名称：FileUploader.vue，支持：多文件选择、已选文件移除、多文件分块上传，此外，也暴露出了如下3个接口，

①whenUpload：执行文件上传操作时的回调函数
②successCallBackLater：文件上传成功时的回调函数
③errorCallBackLater：文件上传发生错误时的回调函数。

图1-默认样式

图2-选择文件后的样式

图3-文件上传后的样式

上图是组件示例（有点丑，样式可根据自己需要进行调整哈）。

FileUploader组件源码

以下部分是我在Plupload插件基础上封装好的Vue组件，源码如下。

<template><div class="wrapper"><br /><div class="btns_group"><div class="select_file btn default" id="browse">选择文件</div><divclass="upload_btn btn success"id="start-upload"@click="startUpload">开始上传</div><div class="upload_btn btn success" id="start-upload" @click="clearFiles">重新选择</div></div><!-- <div class="horizen_splitLine"></div> --><div class="selectedFiles"><!-- 动态渲染文件列表 --><div class="file_row" v-for="(item, index) in fileList" :key="index"><img :src="require('@/assets/icons/file-icon.png')" /><span>{{ item.name }}</span><span>{{ (item.size / 1024).toFixed(2) + "MB" }}</span><span>{{ item.percent != 0 ? item.percent + "%" : "" }}</span></div></div></div>
</template>
<script>
//导入plupload插件库
import plupload from "plupload";
export default {name:"FileUploader",props: ["url", //文件上传请求地址"mime_types", //要上传的文件类型"max_file_size", //单个文件大小上限"params", //除文件之外的附加参数],data() {return {pluploadObj: undefined, //plupload文件上传插件对象fileList: [], //已选择的文件列表};},methods: {/*** 执行文件上传操作*/startUpload() {this.pluploadObj && this.pluploadObj.files.length > 0? this.pluploadObj.start(): this.$emit("whenUpload", { msg: "plupload happened error!" });},/*** 重新选择文件-清空文件列表*/clearFiles() {if (this.pluploadObj && this.fileList && this.fileList.length > 0) {//清空文件列表let _that = this;this.fileList.some(function (value, index, array) {_that.pluploadObj.removeFile(value);});this.fileList.splice(0, this.fileList.length);}},/*** 文件上传成功时的回调函数**/callBack(uploader, file, responseObject) {//自定义事件-文件上传成功之后-接收服务器端返回值this.$emit("successCallBackLater", uploader, file, responseObject);},errorCallBack(uploader, error) {//自定义事件-文件上传发生错误时-自定义处理方式this.$emit("errorCallBackLater", uploader, error);},},mounted() {let _that = this;//plupload插件参数配置let pluploadConfig = {browse_button: "browse", //文件上传按钮url: this.$props.url, //文件请求接口filters: {//文件类型过滤器-默认支持所有文件类型mime_types: this.$props.mime_types? this.$props.mime_types: "image/*,audio/*,video/*,text/*,application/zip",//单个文件大小定义max_file_size: this.$props.max_file_size? this.$props.max_file_size + "mb": "0", //默认0-无上限//防止文件重复选择prevent_duplicates: true, //default-falsemultipart: true, //default -true ,是否将文件作为 multipart/form-data (default) 或者binary stream上传drop_element: "browse", //拖拽方式选择文件multi_selection: true, //开启多文件上传unique_names: true, //为每个文件自动生成唯一名称-作为额外的参数post到服务器端，参数明为name,值为生成的文件名chunk_size: "1Mb", //文件分块大小},init: {//文件上传之前的回调函数BeforeUpload: function (up, files) {up.setOption("multipart_params", _that.$props.params);},//添加文件时的回调函数FilesAdded: function (up, files) {// var html = "";plupload.each(files, function (file) {//记录当前选中的文件-Vue组件自动刷新-无需定制_that.fileList.push(file);});},//文件上传时的进度条绑定UploadProgress: function (up, file) {//已经封装到Vue组件中-自动刷新-无须定制},/*** uploader为当前的plupload实例对象，file为触发此事件的文件对象，responseObject为服务器返回的信息对象，它有以下3个属性：*          response：服务器返回的文本*          responseHeaders：服务器返回的头信息*          status：服务器返回的http状态码，比如200*/FileUploaded: function (uploader, file, responseObject) {//回调函数处理_that.callBack(uploader, file, responseObject);},//错误处理回调函数Error: function (up, err) {//回调函数处理_that.errorCallBack(up, err);},},};//初始化plupload插件this.pluploadObj = new plupload.Uploader(pluploadConfig);//调用初始化方法this.pluploadObj.init();},
};
</script>
<style scoped>
.wrapper {position: absolute;/* top: 50%;left: 50%;transform: translate(-50%, -50%); */width: 350px;border: 1px solid #ccc;border-radius: 5%;background-color: #ffffff;
}
.default {background-color: #409eff;
}
.success {background-color: #67c23a;
}
.btn {color: #ffffff;padding: 5px;border: 1px solid #ccc;border-radius: 10%;
}
.btns_group {display: flex;flex-direction: row;justify-content: space-around;
}div {cursor: pointer;
}/* 文件上传列表样式 */
.filelist {list-style: none;
}
.selectedFiles {margin: 15px 5px;border-top: 1px solid #ccc;
}
.selectedFiles .file_row {padding: 10px 5px;
}
.selectedFiles img {margin-left: 5px;
}
.selectedFiles span {margin: 5px 10px;
}
</style>

Vue：利用Plupload插件封装文件上传组件相关推荐

vue3 封装文件上传组件
由于工作需要,项目中经常需要文件上传这个功能,根据业务的需求,使用vue3 简单封装通用型组件. 作用:主要是用来上传图片的一个通用型组件,当然可以上传文件.支持校验尺寸 , 像素, 文件大小,可以 ...
ASP中文件上传组件ASPUpload介绍和使用方法
[导读]要实现该功能,就要利用一些特制的文件上传组件.文件上传组件网页非常多,这里介绍国际上非常有名的ASPUpload组件 1 下载和安装ASPUpload 要实现该功能,就要利用一些特制的文件 ...
Linux使用445端口,利用enum4linux 445端口+wordpress插件任意文件上传的一次渗透
探测内网80端口发现目标IP 目标使用Apache 2.4.7web服务中间件使用linux Ubuntu系统使用御剑扫描了目录目录扫描到了对192.168.31.236/wordpr ...
vue 文件上传组件封装
增加图片缩略图以及Word.txt文档在线预览文件上传组件完整代码 <template><div><el-uploadclass="upload-demo&q ...
php利用ajax文件上传,如何在PHP中利用AjaxForm实现一个文件上传功能
如何在PHP中利用AjaxForm实现一个文件上传功能发布时间:2020-12-18 14:52:38 来源:亿速云阅读:94 作者:Leah 如何在PHP中利用AjaxForm实现一个文件上传功 ...
js插件---IUpload文件上传插件（包括图片）
js插件---IUpload文件上传插件(包括图片) 一.总结一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...
jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传过程,同时支撑多文 ...
django文件——django + jquery-file-upload上传篇（二）-- 插件实现文件上传+进度条显示 +拖入文件上传...
django + jquery-file-upload 插件实现文件上传+进度条显示 1.model.py class Fujian(models.Model):name = models.CharF ...
Asp.net(C#)利用File Field多文件上传
Asp.net(C#)利用File Field多文件上传利用js添加隐藏File Field控件的方法实现多文件上传,除了一定要为form添加encType="multipart/form ...

Vue：利用Plupload插件封装文件上传组件

调用方式

组件封装源码

FileUploader组件简介

FileUploader组件源码

Vue：利用Plupload插件封装文件上传组件相关推荐

最新文章

热门文章