vue文件上传功能--组件默认方式基于文件流（form-data

<template>

  <div id="app">

    <!-- 

      action:存放的是文件上传到服务器的接口地址

    -->

    <!--组件里 show-file-list  是否显示已上传文件列表 -->

    <!--组件里 on-success  文件上传成功时的钩子，成功时触发 -->

    <!-- before-upload  上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 -->

     <!-- action存放的是上传到服务器的接口地址 -->

    <el-upload

      drag

      action="/single1"

      :show-file-list="false"

      :on-success="handleSuccess"

      :before-upload="beforeUpload"

    >

      <i class="el-icon-upload"></i>

      <div class="el-upload__text">

        将文件拖到此处，或

        <em>点击上传</em>

      </div>

    </el-upload>

    <!-- IMG -->

    <div class="uploadImg" v-if="img">

      <img :src="img" alt />

    </div>

  </div>

</template>

<script>

/*

 * 文件上传有两套方案：

 *   1. 基于文件流（form-data）  element-ui上传组件默认是基于文件流的

 *   2. 客户端需要把文件转化为BASE64

 *

 * 默认上传

 *   格式：multipart/form-data

 *   数据格式：form-data

 *      file 文件流信息

 *      filename 文件名字

 *   上传成功后获取服务器返回信息，通知on-success回调函数执行

 * 内部封装了ajax

 */

export default {

  name: "App",

  data() {

    return {

      img: null,

    };

  },

  methods: {

    // <!--组件里 on-success 文件上传成功时的钩子，成功时触发 result是服务器返回的结果-->  

    handleSuccess(result) {

      //通过服务器返回的code值，判断成功   然后将返回的path地址，赋值给img

      if (result.code == 0) {

        this.img = result.path;

      }

    },

    // 组件里before-upload上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传

    // 在这里面判断一些条件，例如多大的，什么格式的才能上传

    beforeUpload(file) {

      // 格式校验----------------------------

      console.log(file)           //可以知道得到文件的type类型和文件的size大小

      let { type, size } = file;    //file这个属性因为包含这两个值，分别赋值给变量

     //判断文件的格式  正则表达式  匹配文件类型

      if (!/(png|gif|jpeg|jpg)/i.test(type)) {

        this.$message("文件合适不正确~~");    //组件的提示方法

        return false;                        //既然判断出格式不正确，那么就return  终止函数，不往下走了

      }

     //判断文件大小1024B=1KB  1024KB=1MB   假设限定必须在200M以内的

      if (size > 200 * 1024 * 1024) {

        this.$message("文件过大，请上传小于200MB的文件~~");

        return false;

      }

      return true;           //  beforeUpload(file)  最终是返回ture的

    },

  },

};

</script>