- <el-upload action="https://***"
- :headers="upheaders" :limit="1" list-type="picture-card"
- :on-preview="handlePreview" :on-remove="handleRemove" :on-change="handleChange"
- :on-success="handleSuccess" :on-error="handleError" :data="uplistdata"
- :file-list="fileList" :class="{hide:uploadDisabled}"
- :before-upload="beforeAvatarUpload" ref="upload">
- <i class="el-icon-plus">i> <br>
- <span class="teacher_el_upload_btn" @click="submitUpload">点击上传照片span>
- el-upload>
action:请求地址
headers:请求头
limit:上传图片最大数量
on-preview : 点击文件中已上传的文件执行的方法
on-remove:删除某文件执行的方法
on-change:文件状态改变时,上传成功和失败都会执行
on-success:文件上传成功执行的方法
on-error:文件上传失败时执行的方法
data:需要另外给接口传的别的值
file-list:上传的文件列表
beforeAvatarUpload:文件在上传之前执行的方法(我用来判断文件大小和文件类型)
所有方法⬇
- handleChange(file, fileList){
- this.uploadDisabled = fileList.length >= 1;
- },
- submitUpload() {
- this.$refs.upload.submit()
- },
- handleError(err, file, fileList) {
- this.$message({
- message: '上传失败!',
- type: 'success'
- });
- console.log(err);
- },
- handleSuccess(response, file, fileList) {
- this.fileList[0] = response.result
- this.uploadedFile = this.registered_form.idCardImg = response.result.url
- },
- handleRemove(file, fileList) {
- this.fileList = [];
- this.uploadedFile = '',
- setTimeout(()=>{
- this.uploadDisabled = false;
- },1000)
- },
- handlePreview(file) {
- this.dialogImageUrl = file.url;
- this.uploadDisabled = true;
- },
- //判断是否大于5m
- beforeAvatarUpload(file) {
- const isLt2M = file.size / 1024 / 1024 < 5;
- const isJPG = file.type === "image/jpeg" || file.type === "image/png"
- if (!isLt2M) {
- this.$message.warning("上传图片大小不能超过 2M!")
- return false
- } else if (!isJPG) {
- this.$message.warning("上传图片格式只能是jpg或png")
- return false
- }
- return isLt2M;
- },
用到的data
- uploadedFile: '',
- fileList:[],
- uploadDisabled:false,
- dialogImageUrl: '',
- upheaders: {
- Authorization: localStorage.getItem('token')
- },
css
- .el-upload--picture-card{
- width:100px;
- height:100px;
- line-height:20px;
- padding-top: 25px;
- .teacher_el_upload_btn{
- font-size: 10px ;
- }
- }
-
- .hide .el-upload,.hide .el-upload--picture-card{
- display: none;
- // background:red;
- }
- .upload .registered{
- text-align: left;
- }
- .el-upload-list--picture-card .el-upload-list__item{
- width:100px;
- height:100px;
- }