文件上传有两种方式
1.基于文件处理为文件流然后然后传给服务器，这个我们一般是用form-data来处理的，我们把文件流信息放到form-data里面，把form-data传给我们的服务器。然后服务器拿到form-data相关的数据做处理。

2.客户端需要把文件转化为base64位，转化为base64然后传给服务器，服务器在转化为文件

<template>
  <div id="app">
    <!-- 
      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: {
    handleSuccess (result) {
      if (result.code == 0) {
        this.img = result.path;
      }
    },
    beforeUpload (file) {
      // 格式校验
      console.log(file)
      let { type, size } = file;

      if (!/(png|gif|jpeg|jpg)/i.test(type)) {
        this.$message("文件合适不正确~~");
        return false;
      }

      if (size > 200 * 1024 * 1024) {
        this.$message("文件过大，请上传小于200MB的文件~~");
        return false;
      }

      return true;  //返回true表示上传成功
    },
  },
};
</script>

案例链接:https://blog.csdn.net/qq_38121975/article/details/105888736?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromBaidu-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromBaidu-1.control

vue+ elmentUI实现form表单中文件、图片的上传例子

VUE elementUI 表单上传
在项目开发需求中基于VUE + elementUI在表单实现多张图片和Excel文件上传的需求。
1.图片上传模板

image.png
image.png
image.png

:action，必选参数，上传的地址，String类型。
:accept 文件上传类型
drag是否启用拖拽，
:limit文件或者图片数量限制
multiple    是否支持多选文件

2、常用方法介绍
1、在实现自定义上传的:auto-upload设为"false"时before-upload将会无效，此时如要验证文件类型或者大小此处使用on-change的方法，在on-change方法中判断图片类型、大小，如果符合要求加入到pthotoLists中，不符合则移除

image.png

2、表单点击提交进行验证以及文件自定义上传将文件通过参数传递

image.png
image.png
1、在表单验证通过后开始进行文件的提交，通过自定义的实现方式：http-request="upLoadFIle“”
2、在插入文件前先将表单进行formData（）其作用有两点

1、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率

image.png

2、异步上传文件

3、通过append方法进行添加文件和数据

image.png

4、pPostFile为接口提交方式相当于axios
action为 提交的地址（接口名称）
formDataObj为表单中提交的所有参数（内容）
hearder即为header中需要的参数

image.png