关于elementUI的el-upload实现上传图片，以及显示没有上传的本地图片，本地展示base64的src（el-upload拿取的是file，file->base64，base64->file）

标签：header   load   ons   photo   too   dem   没有   show   pre   

本人被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});
}

关于elementUI的el-upload实现上传图片，以及显示没有上传的本地图片，本地展示base64的src（el-upload拿取的是file，file->base64，base64->file）

标签：header   load   ons   photo   too   dem   没有   show   pre   

原文地址：https://www.cnblogs.com/rt8090/p/14682155.html