改造input

效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>改造input</title><style></style></head><body><input type="checkbox" name="" id="" /><input type="file" /><hr /><!-- 方法1: 点击label相当于点击了input--><style>.checkbox1 {display: none;}.checkbox1 + i {/* content: " "; */display: inline-block;font-style: normal;width: 20px;height: 20px;border-radius: 50%;background-color: #c0c0c0;}.checkbox1:checked + i {background-color: hotpink;}.checkbox1 + i::after {}.checkbox1:checked + i::after {content: " ";display: inline-block;margin: 5px;width: 10px;height: 10px;border-radius: 50%;background-color: #c0c0c0;}</style><label><input type="checkbox" class="checkbox1" /><i></i></label><!-- 方法2: 设置input的opacity为0, 定位方式为绝对定位 --><style>.btn {position: relative;display: inline-block;text-align: center;color: #fff;text-decoration: none;width: 80px;height: 32px;line-height: 32px;background: #409eff;border-radius: 3px;font-size: 12px;vertical-align: middle;margin-left: 10px;}input[name="file"] {opacity: 0;width: 100%;height: 100%;position: absolute;left: 0;}</style><a href="javascript:void(0)" class="btn">上传文件<input type="file" id="file" name="file" @change="uploadFile" /></a></body>
</html>

vue中改造input[type=‘file’]标签
在这里插入图片描述

<template>
<div>
<!-- 上传图片 --><div class="upload-file"><divclass="show-img"v-if="true"v-for="(item, index) in srcs":key="index"><img :src="item" alt="" /><span class="after" @click="removeFile(index)"><imgsrc="@/assets/images/Lib_slices/ico_feedback_delete@2x.png"alt=""/></span></div><!-- 文件上传按钮 --><a href="javascript:void(0)" class="btn" v-if="isShow"><span class="add-btn"><imgsrc="@/assets/images/Lib_slices/ico_feedback_add@2x.png"alt=""/></span><inputtype="file"accept="image/*"capture="camera"id="file"name="file"@change="uploadFile"/></a></div>
</div>
</template>

export default {data() {return {isShow: true,srcs: ["http://static.xingfeng.cool/images/avatar.jpeg","http://static.xingfeng.cool/images/zrf.jpeg",],}},methods: {uploadFile(file) {this.isShow = false;this.$indicator.open({text: "图片上传中...",spinnerType: "fading-circle",});},removeFile(index) {this.srcs.splice(index, 1);},}
}

.upload-file {margin-top: 0.98rem;background: #fff;position: relative;box-sizing: border-box;display: grid;grid-template-columns: 4.43rem 4.43rem 4.43rem 4.43rem;align-items: start;justify-items: start;grid-auto-flow: row;.show-img {width: 3.84rem;height: 3.84rem;position: relative;img {width: 100%;height: 100%;}.after {position: absolute;right: -0.26rem;top: -0.26rem;font-size: 1.04rem;width: 1.04rem;height: 1.04rem;line-height: 1.04rem;text-align: center;}}.btn {border: 1px dashed #666;position: relative;left: 0;display: inline-block;text-align: center;color: #fff;text-decoration: none;//   width: 100%;//   height: 100%;width: 3.84rem;height: 3.84rem;line-height: 2.08rem;font-size: 0.78rem;vertical-align: middle;box-sizing: border-box;.add-btn {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);display: flex;flex-direction: column;justify-content: space-between;align-items: center;width: 0.85rem;height: 0.85rem;img {width: 100%;height: 100%;}}#file {opacity: 0;width: 100%;height: 100%;position: absolute;left: 0;}}}

在这里插入图片描述

<style>
.file-upload {display: inline-block;width: 72px;height: 36px;line-height: 36px;text-align: center;color: #fff;position: relative;overflow: hidden;background: #3aa1f5;}.file-upload input {position: absolute;left: 0;top: 0;z-index: 10;opacity: 0;filter: Alpha(opacity=0);filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);color: transparent;width: 100%;height: 100%;cursor: pointer;font-size: 100px;background: transparent;}.file-upload span {font-size: 12px;font-weight: bold;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 100%;height: 100%;}</style><label class="file-upload"><input type="file" name="file" /><span>上传附件</span></label>