input file文件上传自定义样式 及限制上传文件类型

仅用于记录开发过程中遇到的问题及案例。

1、限制上传文件类型。

解决方法：给input添加accept属性：

// 限制上传格式为png/jpg/jpeg三种。
<input
  type="file"
  :value="imgFile"
  accept="image/png, image/jpeg, image/jpg"
/>

//PS:另一种写法：
accept=".png, .jpeg, .jpg"

这时，当选择文件时候，默认会过滤并展示符合条件的文件。

 

 

 但是这只是掩人耳目的做法，用户还可以下拉选择到全部文件，因此还需要通过js进行再次校验控制。

 

 

增加 js控制文件上传类型：

//html代码
// 限制上传格式为png/jpg/jpeg三种。
<input
  type="file"
  :value="imgFile"
  ref="selectImg"
  accept="image/png, image/jpeg, image/jpg"
  @change="uploadImg($event)"
/>

//js代码
export default {
  data() {
    return {
      imgFile: '', // input输入框value值
      fullFile: {}, //  上传的图片信息
    }
  },
  methods: {
    uploadImg(e) {        //选择本地图片,上传图片
      const file = e.target.files[0]
      this.fullFile = file
      if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(e.target.value)) {
        this.$message.error('请上传.png/.jpg/.jpeg格式的图片')
        return false
      } else if (this.fullFile.size / 1024  > 400) {
        this.$message.error('请上传不超过400KB的图片')
        return false
      }
    }
  },
} 

2、自定义样式上传。

input文件上传组件的样式如下展示，往往项目中需要的样式更复杂：

 可通过 把input隐藏，再界面画出 自己需要的样式，通过调用input上传组件的内置点击事件来实现。

实现效果：

上传前：

 

 上传后：

 

 鼠标 悬浮展示编辑和删除按钮：

具体代码如下：

//html代码
<div class="img_box">
  <div class="upload" @click="handleUpload" v-if="!imageUrl">
    <i class="el-icon-upload2"></i>
    <span class="tips">上传格式为png/jpg/jpeg，大小不超过400K的图片</span>
  </div>
  <div class="upload" v-else>
    <div class="img_wrap" :style="{ backgroundImage: `url(${imageUrl})` }">
      <div class="cover">
        <i
          @click="handleUpload"
          class="btn edit el-icon-edit-outline"
        />
        <i @click="handleDelete" class="btn el-icon-delete" />
      </div>
    </div>
  </div>
  <!-- 限制上传格式为png/jpg/jpeg三种。 -->
  <input
    type="file"
    :value="imgFile"
    ref="selectImg"
    style="display: none"
    accept="image/png, image/jpeg, image/jpg"
    @change="uploadImg($event)"
  />
</div>

//js代码
export default {
  data() {
    return {
      imgFile: '', // input输入框value值
      option: {
        img: '', // 图片的地址
      },
    }
  },
  methods: {
    handleDelete() {
      this.$emit('update:imageUrl', '')
      this.option.img = ''
    },
    handleUpload() { //点击上传的回调函数
      //调用input组件的上传事件
      this.$refs.selectImg.click()
    },
    //选择本地图片
    uploadImg(e) { //input接收到文件后的校验函数
      const file = e.target.files[0]
      this.fullFile = file
      if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(e.target.value)) {
        this.$message.error('请上传.png/.jpg/.jpeg格式的图片')
        return false
      } else if (this.fullFile.size / 1024 > 400) {
        this.$message.error('请上传不超过400KB的图片')
        return false
      }
      //图片逻辑处理（可不看）
      const reader = new FileReader()
      reader.onload = e => {
        let data
        if (typeof e.target.result === 'object') {
          // 把Array Buffer转化为blob 如果是base64不需要
          data = window.URL.createObjectURL(new Blob([e.target.result]))
        } else {
          data = e.target.result
        }
        this.option.img = data
      }
      // 转化为blob
      reader.readAsArrayBuffer(file)
    }
  },
}

//css样式
<style lang="less" scoped>
.img_box {
  .upload {
    width: 100%;
    height: 80px;
    padding: 5px;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    color: #c0c4cc;
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    // &:hover {
    //   border-color: #409eff;
    // }
    .tips {
      display: inline-block;
      font-size: 12px;
    }
  }
  .img_wrap {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 6px;
    .cover {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      visibility: hidden;
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      cursor: pointer;
      .btn {
        color: #fff;
      }
      .btn.edit {
        margin-right: 10px;
      }
    }
    &:hover .cover {
      background: rgba(0, 0, 0, 0.4);
      visibility: visible;
    }
    img {
      max-width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>

 

最后：附input上传控件accept属性支持的文件类型：

*.3gpp  audio/3gpp， video/3gpp  3GPP Audio/Video
*.ac3   audio/ac3   AC3 Audio
*.asf   allpication/vnd.ms-asf  Advanced Streaming Format
*.au    audio/basic AU Audio
*.css   text/css    Cascading Style Sheets
*.csv   text/csv    Comma Separated Values
*.doc   application/msword  MS Word Document
*.dot   application/msword  MS Word Template
*.dtd   application/xml-dtd Document Type Definition
*.dwg   image/vnd.dwg   AutoCAD Drawing Database
*.dxf   image/vnd.dxf   AutoCAD Drawing Interchange Format
*.gif   image/gif   Graphic Interchange Format
*.htm   text/html   HyperText Markup Language
*.html  text/html   HyperText Markup Language
*.jp2   image/jp2   JPEG-2000
*.jpe   image/jpeg  JPEG
*.jpeg  image/jpeg  JPEG
*.jpg   image/jpeg  JPEG
*.js    text/javascript， application/javascript JavaScript
*.json  application/json    JavaScript Object Notation
*.mp2   audio/mpeg， video/mpeg  MPEG Audio/Video Stream， Layer II
*.mp3   audio/mpeg  MPEG Audio Stream， Layer III
*.mp4   audio/mp4， video/mp4    MPEG-4 Audio/Video
*.mpeg  video/mpeg  MPEG Video Stream， Layer II
*.mpg   video/mpeg  MPEG Video Stream， Layer II
*.mpp   application/vnd.ms-project  MS Project Project
*.ogg   application/ogg， audio/ogg  Ogg Vorbis
*.pdf   application/pdf Portable Document Format
*.png   image/png   Portable Network Graphics
*.pot   application/vnd.ms-powerpoint   MS PowerPoint Template
*.pps   application/vnd.ms-powerpoint   MS PowerPoint Slideshow
*.ppt   application/vnd.ms-powerpoint   MS PowerPoint Presentation
*.rtf   application/rtf， text/rtf   Rich Text Format
*.svf   image/vnd.svf   Simple Vector Format
*.tif   image/tiff  Tagged Image Format File
*.tiff  image/tiff  Tagged Image Format File
*.txt   text/plain  Plain Text
*.wdb   application/vnd.ms-works    MS Works Database
*.wps   application/vnd.ms-works    Works Text Document
*.xhtml application/xhtml+xml   Extensible HyperText Markup Language
*.xlc   application/vnd.ms-excel    MS Excel Chart
*.xlm   application/vnd.ms-excel    MS Excel Macro
*.xls   application/vnd.ms-excel    MS Excel Spreadsheet
*.xlt   application/vnd.ms-excel    MS Excel Template
*.xlw   application/vnd.ms-excel    MS Excel Workspace
*.xml   text/xml， application/xml   Extensible Markup Language
*.zip   aplication/zip  Compressed Archive