# 使用<input type="file">夾帶 base 64檔案 <br/>客製化<input type="file">樣式


## html css

原廠的<input type="file">樣式比較不好看,
而且不容易修改 所以可以用 label 的 for 屬性指向該input,
這樣點擊label 就會等於點到input, 並將input file 隱藏起來
將自己想要的樣式 做再label上, 即可完成.

html

<div class="col-md-6 mb-3 d-flex flex-column">
  <label for="formFile">夾帶附件</label>
  <div class="file_wrapper">
    <label for="formFile" class="file_upload">選擇檔案
      <input class="form-control d-none" type="file" id="formFile" @change="fileChangehandler">
    </label>
    <div class="file_wrapper_discription">{{fileContent}}</div>
  </div>
</div>

file_upload 做成像是button的樣式 或是可以放圖片進來
file_wrapper_discription 為說明文字的樣式

.file_wrapper{
  display: flex;
  align-items: center;
  height: 43px;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  overflow: hidden;
}
.file_upload {
  padding: 9px;
  height: 43px;
  cursor: pointer;
  border-right: 1px solid #ccc;
  background-color: #009A44;
  color: white;
  margin-bottom: 0px !important;
}
.file_wrapper_discription{
  padding: 0 5px;
  color: gray;
}

## change事件 及 base 64

當使用者選擇 檔案時會觸發change事件
可以使用

e.target.files

取得使用者 選擇檔案的資訊


  //建立 fileReader 物件
  const reader = new FileReader
  //readAsDataURL 方法： 開始讀取指定的 Blob，讀取完成後屬性 result 將以 data: URL 格式（base64 編碼）的字串來表示讀入的資料內容。
  reader.readAsDataURL(e.target.files[0])
  //onload 事件： 於讀取完成時觸發。
  reader.onload = () => {
    //reader.result 為檔案的內容
    this.file = reader.result
  }
  reader.onerror = (error) => {
    console.log('Error:', error)
  }

[fileReader MDN](https://developer.mozilla.org/zh-TW/docs/Web/API/FileReader)

再onload事件中, 當讀取完資料便會把reader.result 存入 this.file 中

另外 我用了
e.target.files[0].size
e.target.files[0].type
來限制使用者 的上傳格式以及檔案大小

用e.target.files[0].name 來顯示 使用者選擇檔案的內容

之後來試做 預覽檔案圖片之類～～