vue圖片上傳及預覽

HTML部分
limit：上傳數量限制
action：要提交的地址，因為我們自己提交，所以設為#
multiple：是否多選
auto-upload:是否自動上傳
accept：接收文件類型
show-file-list：添加文件后，是否顯示文件列表
更多屬性請查詢element-ui：https://element.eleme.cn/#/zh-CN/component/upload

<el-upload
   ref="upload"
   class="avatar-uploader"
   :limit="1"
   action="#"
   :multiple="false"
   :auto-upload="false"
    accept="image/jpeg,image/png"
    :on-change="OnChange"
    :show-file-list="false"
   >
  <i class="el-icon-plus avatar-uploader-icon" />
</el-upload>
<img v-if="avatar" class="svg-icon" :src="avatar" />
<button @clicl="onSubmit">上傳</button>

js

data(){
  return {
    // 預覽圖片的地址
    avatar："",
    // 用來保存需要上傳的文件
    customImageFile:null
  }
},
 methods:{
  OnChange(file) {
    this.customImageFile = file;
    // 創建一個讀取對象
    var reader = new FileReader();
    // 將文件轉化為一個二進制字符串
    reader.readAsArrayBuffer(file.raw);
    // 監聽文件讀取完成
    reader.onload = e => {
    // 監聽完成后，將二進制字符串轉化為Blob對象，並且通過URL.createObjectURL創建一個url，指向該Blob對象
    let data = window.URL.createObjectURL(
    new Blob([e.target.result])
   );
    // 將生成的url賦值給需要預覽的url
    this.avatar = data;
   };    
  },
  onSubmit() {
    // 創建一個FormData實例
    let formData = new FormData();
    // 將需要上傳的文件添加到formDatas里
    formData.append("file", this.customImageFile.raw);
    // 最后發起請求
    axios.post("/url",data:formData)
  }
 }