vue+elementUi+upload上传文件检测类型和大小、includes、createObjectURL、upload、display、justify、radius

前言

vue2达不到取消上传的目的，只能实现类型和大小检查。即使选择了不是规定类型的文件也依然能上传到远程服务器，因为取消上传的步骤没有实现，可以参考vue3+elementPlus来实现。

vue2+elementUi

html

<div class="upload_box"> <el-upload action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :on-error="handleOnError" :before-upload="beforeAvatarUpload" > <img v-if="ruleForm.coverImage" :src="ruleForm.coverImage" class="cover_image" /> <i v-else class="el-icon-plus avatar-uploader-icon"> console.log("handleAvatarSuccess:", res, file); this.ruleForm.coverImage = URL.createObjectURL(file.raw); }, // 上传失败 handleOnError(error) { console.log("error:", error); }, // 上传前 beforeAvatarUpload(file) { // 检测文件类型 let isFileType = ["image/jpeg", "image/png", "image/jpg"].includes(file.type), // 文件大小为20M isFileSize = file.size / 1024 / 1024 < 20; if (!isFileType) this.$message.error("上传头像图片只能是jpeg/png/jpg格式!"); if (!isFileSize) this.$message.error("上传头像图片大小不能超过20MB!"); return isFileType && isFileSize; } 

css

.upload_box { display: flex; justify-content: center; align-items: center; width: 145px; height: 145px; border: 1px dashed #d9d9d9; border-radius: 6px; } .cover_image { width: 100%; height: 100%; } 

vue3+elementPlus

html

<el-upload ref="refUpload" :http-request="uploadFile" :accept="accept" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeUpload" > <img v-if="formData.cover" class="w_186_i h_168_i" :src="formData.cover" /> <el-icon v-else class="w_186_i h_168_i f_s_30_i f_w_800 color_8c939d_i ta_c_i b_1d_dcdfe6_i"> <Plus />  reactive, ref } from 'vue'; import { ElMessage } from 'element-plus'; import { uploadFile } from "@/api/base"; import { TypeAndSizeVerification } from '@/utils/typeAndSizeVerification'; interface IFromData { cover: string } let formData: any = reactive<IFromData>({ cover: '' }), accept = ref(".jpg, .jpeg, .png"), refUpload = ref(), TASV = new TypeAndSizeVerification(accept.value, 20); // 上传前回调 function beforeUpload(file: any) { if (!TASV.handleResult(file.name)) { ElMessage({ message: '文件类型错误，上传失败', type: 'warning', }); // 取消上传的关键代码 // 此方法执行就不会发送请求 refUpload.value.upload.abort(); } } // 上传成功回调 function handleAvatarSuccess(res: any) { let { data: { data: { url } } } = res; formData.cover = url; } 

代码解析

1、TypeAndSizeVerification传送门。

2、base文件中的uploadFile方法

import request from '@/utils/request'; export const uploadFile = (params: any) => { let data = new FormData(); data.append('file', params.file); return request({ url: 'uploadFile', method: 'post', data }); }; 

3、request文件

import axios, { AxiosInstance, AxiosError, AxiosResponse, AxiosRequestConfig } from 'axios'; import { ElMessage } from "element-plus"; const service: AxiosInstance = axios.create({ timeout: 5000 }); service.defaults.baseURL = import.meta.env.APP_URL; service.interceptors.request.use( (config: AxiosRequestConfig) => { if (config.method == 'post') config.data._token = sessionStorage.getItem('csrf-token'); if (import.meta.env.APP_ENV == "development") { config.url = '?i=1&dev=1&r=' + config.url; } else if (import.meta.env.APP_ENV == "production") { config.url = '?r=' + config.url; } return config; }, (error: AxiosError) => { return Promise.reject(error); } ); service.interceptors.response.use( (response: AxiosResponse) => { if (response.status === 200) { if (response.headers['authorization-csrf']) sessionStorage.setItem('csrf-token', response.headers['authorization-csrf']); return response; } else { Promise.reject(); } }, (error: any) => { if (error.response.status === 401 && error.response.data.message === 'Unauthenticated.') { ElMessage.error('登录已失效，请重新登录'); setTimeout(() => { location.reload(); }, 1500); return; } return Promise.reject(error); } ); export default service; 

style

_i中的i表示!important。