vue+element+upload实现文件上传之前检测类型和大小 如果类型或大小不符合规定就取消

目录

前言

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

vue2+elementUi

html

<div class="upload_box"><el-uploadaction="/posts/":show-file-list="false":on-success="handleAvatarSuccess":on-error="handleOnError":before-upload="beforeAvatarUpload"><imgv-if="ruleForm.coverImage":src="ruleForm.coverImage"class="cover_image"/><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload></div>

JavaScript

// 上传成功handleAvatarSuccess(res, file) {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),// 文件大小为20MisFileSize = 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 /></el-icon></el-upload>

TypeScript

import {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。

vue+element+upload实现文件上传之前检测类型和大小 如果类型或大小不符合规定就取消上传 终止 停止 中断 createObjectURL includes abort request