结合 el-upload 实现图片上传,预览.

​​​​​​​

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
<div id="root">
  <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
    :auto-upload=false :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-change="changeFn">
    <img v-if="imageUrl" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</div>
<script src="./vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/index.js"></script>
<script>
  const vm = new Vue({
    el: "#root",
    data: {
      imageUrl: '',
    },
    mountend() {

    },
    methods: {
      changeFn(file, fileList) {
        this.imageUrl = URL.createObjectURL(file.raw);
        console.log(file, "文件")
        console.log(fileList, "文件列表")
        this.upFile(file)
      },
      upFile(file) {
        console.log(file.raw,"上传参数")
        var formData = new FormData();
        formData.append('file', file.raw);  //添加图片信息的参数
        formData.append('sizeid', 123);  //添加其他参数
        $.ajax({
          url: '/material/uploadFile',
          type: 'POST',
          cache: false, //上传文件不需要缓存
          data: formData,
          processData: false, // 告诉jQuery不要去处理发送的数据
          contentType: false, // 告诉jQuery不要去设置Content-Type请求头
          success: function (data) {
           
          },
          error: function (data) {
            tipTopShow("上传失败");
          }
        })

      },

取自大佬@lar_lsw

https://blog.csdn.net/qyp_slw/article/details/78787436?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164147556016781685379174%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=164147556016781685379174&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-78787436.first_rank_v2_pc_rank_v29&utm_term=ajax%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87&spm=1018.2226.3001.4187