Vue使用WebUploader上传文件/压缩包

npm i webuploader -S

引入

//引入webuploader
import WebUploader from "webuploader";
import "webuploader/dist/webuploader.css";

页面

<el-row class="webUploader"><el-col :span="24" class="mb20" :style="{ display: 'flex' }"><el-buttonclass="selectFile":disabled="disabled"type="primary"size="mini"ref="selectFile">选择文件</el-button><el-button@click="submitFile":disabled="disabled"type="success"size="mini">开始上传</el-button></el-col><el-col :span="24"><el-table :data="value" :disabled="disabled" size="mini"><el-table-columnlabel="文件名"align="left"key="fileName"prop="fileName":show-overflow-tooltip="true"/><el-table-columnlabel="大小"align="center"key="fileSize"prop="fileSize":show-overflow-tooltip="true"/><el-table-columnlabel="进度"align="center"key="fileProgress"prop="fileProgress"><template slot-scope="scope"><el-progress:text-inside="true":stroke-width="16":percentage="scope.row.fileProgress"></el-progress></template></el-table-column><el-table-columnlabel="状态"align="center"key="fileStatus"prop="fileStatus":show-overflow-tooltip="true"/><el-table-columnlabel="操作"align="center"class-name="small-padding fixed-width"><template slot-scope="scope"><el-buttonsize="mini"type="text"icon="el-icon-video-play"@click="resume(scope.row.file)"v-hasPermi="['system:user:edit']":disabled="scope.row.fileStatus === '上传成功'">开始</el-button><el-buttonsize="mini"type="text"icon="el-icon-video-pause"@click="stop(scope.row.file)":disabled="scope.row.fileStatus === '上传成功'"v-hasPermi="['system:user:remove']">暂停</el-button><el-buttonsize="mini"type="text"icon="el-icon-delete":disabled="disabled"@click="remove(scope.row, scope.$index)"v-hasPermi="['system:user:resetPwd']">移除</el-button><el-buttonsize="mini"type="text"icon="el-icon-video-camera"@click="imgLook(scope.row.fileId)":disabled="scope.row.fileStatus !== '上传成功'"v-hasPermi="['system:user:resetPwd']">预览</el-button></template></el-table-column></el-table></el-col></el-row>

用法

export default {name: "uploaderList",components: {},props: {accept: {type: [String, Object],default: null},// 上传地址url: {type: String,default: "url"},// 上传最大数量 默认为100fileNumLimit: {type: Number,default: 100},// 大小限制 默认2MfileSingleSizeLimit: {type: Number,default: 5120000},fileType: {type: String,default: "knowledge"},// 上传时传给后端的参数，一般为token，key等formData: {type: Object,default: () => {return { guid: null, code: 9 };}},// 生成formData中文件的key，下面只是个例子，具体哪种形式和后端商议keyGenerator: {type: Function,default: () => `${new Date().getTime()}`},multiple: {type: Boolean,default: true},// 上传按钮IDuploadButton: {type: String,default: ""},value: {type: Array,default: () => []},disabled: {type: Boolean,default: () => false}},data() {return {uploader: null};},watch: {disabled(newVal) {if (newVal) {this.uploader.destroy();return false;}this.initWebUpload();}},mounted() {if (!this.disabled) {this.initWebUpload();}},methods: {initWebUpload() {if (this.uploader) {this.uploader.destroy();}const uploader = (this.uploader = WebUploader.create({auto: false, // 选完文件后，是否自动上传// swf: '/static/lib/webuploader/Uploader.swf',  // swf文件路径server: this.url, // 文件接收服务端pick: {//pick: { id: "#up_single", multiple: false },id: this.$refs.selectFile.$el, // 选择文件的按钮multiple: this.multiple // 是否多文件上传 默认false},accept: this.getAccept(this.accept), // 允许选择文件格式。threads: 3,fileNumLimit: this.fileNumLimit, // 限制上传个数//fileSingleSizeLimit: this.fileSingleSizeLimit, // 限制单个上传图片的大小formData: this.formData, // 上传所需参数chunked: true, //分片上传chunkSize: 5120000, //分片大小duplicate: true // 重复上传//上传文件格式//accept: {// extensions: "doc,docx,pdf,txt,xls,xlsx,jpg,png,mp4,avi",//  mimeTypes: ".doc,.docx,.pdf,.txt,.xls,.xlsx,.jpg,.png,.mp4,.avi",// },accept: {extensions: "zip,rar,ios,7z",mimeTypes: ".zip,.rar,.ios,.7z,",},}));const fun = ["fileQueued","uploadStart","uploadProgress","uploadSuccess","error"];for (const item of fun) {uploader.on(item, this[item]);}return uploader;},// 当有文件被添加进队列的时候，添加到页面预览fileQueued(file) {const { name, size, id } = file;const obj = {id,fileName: name,fileSize: WebUploader.Base.formatSize(size),fileProgress: 0,fileStatus: "待上传",file};this.value.push(obj);},// 在这里可以准备好formData的数据uploadStart() {this.uploader.options.formData.guid = this.keyGenerator();},// 文件上传过程中创建进度条实时显示。uploadProgress(file, percentage) {const fileObj = this.value.find(obj => file.id == obj.id);fileObj.fileStatus = "上传中";fileObj.fileProgress = parseInt(percentage * 100);fileObj.file = file;},// 文件上传成功async uploadSuccess(file, res) {const fileObj = this.value.find(obj => file.id == obj.id);try {const { data } = await combine({guid: res.guid,fileName: file.name,fileType: this.fileType,code: res.code});fileObj.fileId = data.fileId;fileObj.fileStatus = "上传成功";this.$emit("input", this.value);} catch (err) {fileObj.fileProgress = 0;fileObj.fileStatus = "上传失败,请点击开始重新上传";}},error(type) {//报错信息let errorMessage = "";if (type === "F_EXCEED_SIZE") {errorMessage = `文件大小不能超过${this.fileSingleSizeLimit /(1024 * 1000)}M`;} else if (type === "Q_EXCEED_NUM_LIMIT") {errorMessage = "文件上传已达到最大上限数";} else {errorMessage = `上传出错！请检查后重新上传！错误代码${type}`;}console.error(errorMessage);},// 开始resume(file) {this.uploader.upload(file);},// 暂停stop(file) {file.fileStatus = "暂停中";this.uploader.stop(file);},// 移除async remove(row, idx) {const { fileId, file } = row;try {if (fileId) await delFileApi(fileId);this.value.splice(idx, 1);if (file) {// 取消并中断文件上传this.uploader.cancelFile(file);// 在队列中移除文件this.uploader.removeFile(file, true);}this.$emit("input", this.value);} catch (error) {}},// 预览imgLook(fileId) {if (!fileId) {return false;}lookImg(fileId).then(res => {const sourceImages = [];sourceImages.push({thumbnail:process.env.VUE_APP_BASE_API +this.profile +res.data.thumbnailFile,source:process.env.VUE_APP_BASE_API + this.profile + res.data.thumbnailFile});// console.log(sourceImages);this.$refs.viewer.show(sourceImages, 0);});},//上传文件格式getAccept(accept) {switch (accept) {case "text":return {title: "Texts",exteensions: "doc,docx,xls,xlsx,ppt,pptx,pdf,txt",mimeTypes: ".doc,docx,.xls,.xlsx,.ppt,.pptx,.pdf,.txt"};case "video":return {title: "Videos",exteensions: "mp4",mimeTypes: ".mp4"};case "image":return {title: "Images",exteensions: "gif,jpg,jpeg,bmp,png,tif",mimeTypes: ".gif,.jpg,.jpeg,.bmp,.png,.tif"};default:return accept;}},submitFile() {this.uploader.upload();}}
};

引入组件

//引入
import UploaderList from "@/components/upload/uploadList.vue";
components: { UploaderList },
//使用<UploaderListv-model="imageList":formData="{ guid: null, fileCategory: 1, code: 7 }":fileType="'targetFacility'"
/>

Vue使用WebUploader上传文件/压缩包相关推荐

webuploader上传文件，后台Java接收
前台html页面: <!DOCTYPE html> <html> <head> <title>Insert title here</title&g ...
6.基于vue封装的上传文件等功能
效果图如下: 文件所在位置: view/huge_file_upload/huge_file_upload.vue:(在项目中使用?) <template><div><d ...
antd vue表单上传文件_Vue编译出静态文件上传七牛CDN
Vue作为目前比较流行的前端开发框架,在前后端分离比较时尚的今天异常火热,下面分享下怎么把Vue编译出来的静态文件上传到CDN,在这里主要是七牛云的CDN. Vue项目进行编译编译命令: npm r ...
webuploader+上传文件夹
在web项目中上传文件夹现在已经成为了一个主流的需求.在OA,或者企业ERP系统中都有类似的需求.上传文件夹并且保留层级结构能够对用户行成很好的引导,用户使用起来也更方便.能够提供更高级的应用支撑. ...
Minio入门系列【13】使用WebUploader上传文件到Minio服务器
前言在之前介绍了Minio常用功能,以及如何使用JAVA SDK集成Minio,但是没有涉及到前端应该怎么做,接下来介绍如何使用Web组件集成Minio进行文件处理. WebUploader(摘自官 ...
vue前端实现上传文件,vue 上传文件
以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传 ...
antd vue表单上传文件_AntDesign vue学习笔记-自定义文件上传
上传文件时实际可能需要传输一个token. 方法一: 1.查看vue antdesign文档 https://vue.ant.design/components/upload-cn/ 2.使用cust ...
webuploader上传文件夹控件
一. 功能性需求与非功能性需求要求操作便利,一次选择多个文件和文件夹进行上传: 支持PC端全平台操作系统,Windows,Linux,Mac 支持文件和文件夹的批量下载,断点续传.刷新页面后继续传输 ...
WebUploader 上传文件的两种方式（手动上传，自动上传）
1 手动上传上传文件分为两步,第一步选择文件,第二步上传文件. HTML代码: <input type='button' id='selectFile' value='选择文件'> &l ...

Vue使用WebUploader上传文件/压缩包

Vue使用WebUploader上传文件/压缩包

Vue使用WebUploader上传文件/压缩包相关推荐

最新文章

热门文章