Restricciones de carga (ancho, alto, tamaño, formato) para los componentes de carga
Efecto
css
.out-box{
ancho : 100 %;
borde: 1px sólido #e6e6e6;
radio del borde: 8px;
relleno: 20px 20px 10px;
}
.img-border{
borde: 1px sólido #e6e6e6;
radio-borde: 8px;
margen- derecha: 20px;
ancho:100px;
alto:100px;
}
.upload-inner-box{
ancho: 100px;
alto:100px;
visualización: bloque en línea
}
.upload- cuadro interno{
ancho: 100 px;
alto: 100 px;
tamaño de fuente: 40 px;
texto -alinear: centro;
fondo: #F5F5F5;
}
.upload-tip{
color:rojo
}
Plantilla
:show-upload-list="false" :max- tamaño = "5120" :on-success="handleSuccess" :on-exceeded-size="handleMaxSize" :before-upload=" beforeUploadImg" :loading="true" tipo="drag" : :format="['jpg','jpeg','png ', 'gif']" :on-format-error="handleFormatError" action="url" class="upload-box" > < div style="font-size: 12px"& gt;Sube imágenes
minHeight}}, no sea más pequeño que este tamaño e intente dibujar de acuerdo con la relación de aspecto para garantizar el efecto de la página
datos
seeView: "false",//Si se muestra la imagen cargada
imageUrl:" ",// La dirección de la imagen cargada
url: "",//La dirección de la imagen cargada Dirección
minWidth:number,//minWidth
minHeight: number,//minHeight
Método
//Carga exitosa
p>handleSuccess(respuesta, archivo, handleSuccess(respuesta), handleSuccess(respuesta), handleSuccess(respuesta), handleSuccess(respuesta), handleSuccess(respuesta), handleSuccess (respuesta), handleSuccess(respuesta), handleSuccess(respuesta) , handleSuccess(respuesta), handleSuccess(respuesta, archivo) handleSuccess(respuesta, archivo, fileList) {
?this.imageUrl = respuesta.resultado;
? this.seeView = true ;
},
//El tamaño del archivo cargado excede los requisitos
handleMaxSize() {
? this.$Modal.warning( {
título: "Consejo",
contenido: "¡¡¡El tamaño de la miniatura cargada no puede exceder los 5 millones!!!"
?});
p>
},
//Cargar un archivo en un formato no compatible
handleFormatError() {
? this.$Modal.warning({
título: "Consejo",
contenido: " ¡¡¡Miniatura cargada en el formato incorrecto!!!" ?
?});
},
//checkImageWidthHeight beforeUpload
beforeUploadImg (archivo) {
? this.checkImageWidth(archivo, minWidth).then((checkWidth) => {
if (checkWidth) {
?esto .checkImageHeight(archivo, minHeight).then((checkHeight) => {
p>if (checkHeight) {
? this.$refs.uploadFiles.post(file);
}
?});
}
?});
Devuelve falso;
},<
/p>
// Método asincrónico checkImageWidth
async checkImageWidth(file, widthCheck) {
? Let width = await this.let checkWidth = width > widthCheck || = widthCheck;
? if (!checkWidth) {
this.$Notice.warning({
? título: "Descripción:
file.name +
"El ancho es" +
ancho +
"px, suba un ancho mayor que" +
widthCheck +
"Imagen de px.",
});
?onload = function () {
? if (lector.readyState == 2) {
const img = nueva imagen();
img.src = lector.resultado;
img. onload = función () {
? resolver(este.ancho);
};
?}
};
?});
},
// Método asincrónico checkImageHeight
async checkImageHeight(file, heightCheck) {
? let altura = esperar esto.let checkHeight = altura > alturaCheck || altura == alturaCheck;
if (!checkHeight) {
this.$Notice.warning( {
p>
? título: "Descripción:
nombre.archivo +
" La altura es " +
altura +
"px, sube una imagen con una altura mayor que" +
heightCheck +
"px.",
});
? onload = función () {
? if (reader.readyState == 2) {
const img = nueva imagen();
img.src = lector.resultado;
img.onload = función () {
resolver(esta.altura);
};
?}
};
?});
},
?