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)
  }
 }