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