關於elementUI的el-upload實現上傳圖片，以及顯示沒有上傳的本地圖片，本地展示base64的src（el-upload拿取的是file，file->base64，base64->file）

本人被el-upload的上傳困擾了許久，查閱了不少資料，暫時是解決了
主要就是對el-upload實現上傳圖片的途徑的不理解
先貼代碼，之后在做分析吧

vue部分

<div class="pic">
  <el-image class="userImg" :src="localUserImg">
    <div slot="placeholder" class="image-slot">
        加載中<span class="dot">...</span>
    </div>
  </el-image>
  <el-upload
    ref="upload"
    class="upload-demo"
    action=""  //這是你的接口
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :on-success="showSuccess"
    :on-exceed="handleExceed"
    :headers="myHeaders"  //headers不是header
    :file-list="fileList"
    name="photo"
    list-type="picture">
    <el-tooltip class="item" effect="dark" content="只能上傳一張且格式為jpg/png文件，大小不超過500kb" placement="bottom" >
        <el-button size="small" type="primary" @click="submitUpload" >點擊上傳</el-button>
    </el-tooltip>
  </el-upload>
</div>

script的函數部分

const handleRemove = (file, fileList) =>{
    console.log(file, fileList);
}
const handlePreview = (file) => {
    console.log(file);
}
const handleExceed = (files, fileList) => {
    root.$message.warning(`當前限制選擇 1 個文件，本次選擇了 ${files.length} 個文件，共選擇了 ${files.length + fileList.length} 個文件`);
}
const beforeRemove = (file, fileList) => {
    return root.$confirm(`確定移除 ${ file.name }？`);
}
const showSuccess = (res, file) => {
  console.log("/*****上傳圖片的返回值*****/")
  console.log(res)
  if(res.code == 200) {
      window.localStorage.setItem('userImg', res.data.imagePath);  //存到localStorage
      localUserImg.value = res.data.imagePath;
      console.log(localUserImg.value)
  }
}
//這個函數貌似沒用
const submitUpload = () => {
    refs.upload.submit()
}

base64和file互換

const handleExceed = (files, fileList) => {
    root.$message.warning(`當前限制選擇 1 個文件，本次選擇了 ${files.length} 個文件，共選擇了 ${files.length + fileList.length} 個文件`);
}

//onChange在el-upload中是:on-change="onChange"
const onChange = (file,fileList) => {
    var event = event || window.event;
    var file = event.target.files[0];
    var reader = new FileReader();
    //轉base64
    reader.onload = function(e) {
        imageUrl.value = e.target.result //將圖片路徑賦值給src
    }
    reader.readAsDataURL(file);
}

const handleChange = (res, file) => {
    imageUrl.value = URL.createObjectURL(file.raw);
}

//base64轉文件
const dataURLtoFile = (dataurl, filename) => {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type: mime});
}