一、upload上传照片和文字
el-upload提供了一种简单的方式来上传照片和文字,我们可以使用它轻松上传图片和附带文字,下面我们来看看怎么做:
1、首先,我们需要在页面上引入el-upload组件:
<template> <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :data="{ userId: 1 }" multiple :on-success="handleSuccess" :before-upload="beforeUpload"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">jpg/png文件,大小不超过 10MB</div> </el-upload> </template>
2、接着,我们需要定义两个方法:beforeUpload和handleSuccess。其中,beforeUpload用来检测文件是否符合要求,handleSuccess在文件上传成功后处理返回的结果。
data() { return { fileList: [] }; }, methods: { handleSuccess(response, file, fileList) { console.log(response, file, fileList); }, beforeUpload(file) { const isJPG = file.type === 'image/jpeg'; const isPNG = file.type === 'image/png'; const isLt10M = file.size / 1024 / 1024 < 10; if (!isJPG && !isPNG) { this.$message.error('上传图片只能是 JPG/PNG 格式!'); } if (!isLt10M) { this.$message.error('上传图片大小不能超过 10MB!'); } return (isJPG || isPNG) && isLt10M; } }
二、element upload上传
el-upload是element-ui框架中内置的上传组件,它提供了丰富的上传功能,还允许用户自定义上传参数和文件筛选规则。
1、首先,我们需要在页面上引入element-ui:
import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
2、接着,我们需要在页面上引入el-upload组件:
<template> <div> <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :auto-upload="false" :on-change="uploadChange"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">jpg/png文件,大小不超过 10MB</div> </el-upload> <el-button class="upload-demo" type="success" @click="submitUpload"> 上传至服务器 </el-button> <div v-for="(item, index) in fileList" :key="index"> {{ item.name }} </div> </div> </template>
3、然后,我们需要在data函数中定义fileList变量来存储上传的文件列表:
data() { return { fileList: [] }; }
4、接着,我们需要定义两个方法:uploadChange和submitUpload。其中,uploadChange用于上传文件后更新文件列表,submitUpload用于将文件上传至服务器。
methods: { uploadChange(file, fileList) { this.fileList = fileList.slice(); }, submitUpload() { this.$refs.upload.submit(); } }
三、el-upload手动上传
el-upload还支持手动上传,这意味着用户可以手动选择文件,然后单击“上传”按钮将其上传到服务器。
1、首先,我们需要在页面上引入el-upload组件:
<template> <el-upload class="upload-demo" ref="upload" :auto-upload="false" :on-change="handleChange"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">jpg/png文件,大小不超过 10MB</div> </el-upload> <el-button class="upload-demo" type="success" @click="submitUpload"> 上传至服务器 </el-button> </template>
2、接着,我们需要定义handleChange方法来更新文件列表:
handleChange(file, fileList) { this.fileList = fileList.slice(); }
3、最后,我们需要定义submitUpload方法,在用户单击“上传至服务器”按钮时调用该方法,触发手动上传。
submitUpload() { this.$refs.upload.submit(); }
四、el-upload上传文件夹
我们还可以使用el-upload上传文件夹到服务器,el-upload提供了一个directory属性,当它设置为true时,用户可以上传整个文件夹,而不仅仅是单个文件。
1、首先,我们需要在页面上引入el-upload组件:
<template> <el-upload class="upload-demo" :directory="true" action="https://jsonplaceholder.typicode.com/posts/" :on-change="handleChange" :before-upload="beforeUpload"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">文件夹,大小不超过 10MB</div> </el-upload> </template>
2、接着,我们需要定义handleChange和beforeUpload方法,其中handleChage方法用于更新文件列表,beforeUpload方法用于检测上传的文件夹是否符合要求:
handleChange(file, fileList) { this.fileList = fileList.slice(); }, beforeUpload(file) { const isLt10M = file.size / 1024 / 1024 < 10; if (!isLt10M) { this.$message.error('上传文件夹大小不能超过 10MB!'); } return isLt10M; }
五、webuploader分片上传选取
除了以上提到的几种上传方法,我们还可以使用webuploader插件实现分片上传选取,下面是详细的实现方法:
1、首先,需要在页面上引入webuploader插件的样式文件和JS文件:
<style> @import url('/static/webuploader/webuploader.css'); </style> <script src="/static/webuploader/webuploader.min.js"></script>
2、接着,我们需要创建一个容器来存储webuploader的ui组件:
<template> <div id="webuploader"></div> </template>
3、然后,我们需要在mounted方法中初始化webuploader组件:
mounted() { let uploader = WebUploader.create({ auto: true, server: '/api/file/upload', pick: '#webuploader', resize: false, chunked: true, chunkSize: 5 * 1024 * 1024, chunkRetry: 3, threads: 1, fileNumLimit: 10, fileSizeLimit: 10 * 1024 * 1024, fileSingleSizeLimit: 100 * 1024 * 1024 }); }
4、最后,我们需要在data函数中定义uploader变量来存储webuploader组件,并在beforeDestroy方法中销毁组件:
data() { return { uploader: null }; }, beforeDestroy() { this.uploader.destroy(); }
总结
el-upload是element-ui框架中内置的上传组件,它提供了多种上传方式,例如上传照片和文字、element upload上传、上传文件夹、使用webuploader实现分片上传选取等,可以满足大多数上传需求。