vue axios 图片上传

<template>
  <div class="home">
<el-upload
      class="upload-demo"
      ref="upload"
      action="/api/index.php/index/upload/uploadimg"
      accept=".jpg,.jpeg,.png,.JPG,.JPEG"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :auto-upload="false"
      :on-change="getFile">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
      <div slot="tip" class="el-upload__tip">
        <p>只能上传jpg/png文件，且不超过500kb</p>
        <img :src="imageUrl" class="imgcalss">
      </div>
    </el-upload>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        imageUrl: '/public/img/20191118/1574061393.jpeg',
        datastr:{}
      };
    },
    methods: {
      submitUpload() {
          let postData = this.$qs.stringify({
                imgurl:this.imageUrl
            });
            this.axios({
                method: 'post',
                url:'api/index.php/index/upload/uploadimg',
                data:postData
            }).then((res)=>{
                console.log(res.data) 
            })
      },
      //文件列表移除文件时的钩子
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      //点击文件列表中已上传的文件时的钩子
      handlePreview(file) {
        console.log(file,'上传');
      },
     getFile(file, fileList) {
        console.log(fileList);
        this.getBase64(file.raw).then(res => {
          console.log(res)
          this.imageUrl=res
        });
      },
      getBase64(file) {
        return new Promise(function(resolve, reject) {
          let reader = new FileReader();
          let imgResult = "";
          reader.readAsDataURL(file);
          reader.onload = function() {
            imgResult = reader.result;
          };
          reader.onerror = function(error) {
            reject(error);
          };
          reader.onloadend = function() {
            resolve(imgResult);
          };
        });
      }
    }
  }
</script>
<style>
  .imgcalss{
    width: 200px;
    height: 200px;
  }
</style>

注意：安装qs