vue 怎么上传文件，单个还是多个

// 重点 单个的可以把文件路径写在action中，然后调用submit()方法，:action="/api/upload"此个接口与后端沟通。

// 多个的话不要鞋在action中，如下，单独鞋在方法中，重点用到了FormData 的格式上传文件 let formData = new FormData(); 后端用的是MultipartFile来接收file,前端传的file ，主要是组件的file的row数据，如下：

<template>

  <div>

    <el-upload

      class="upload-demo"

      action="fakeaction"

      :on-preview="handlePreview"

      :on-remove="handleRemove"

      :before-remove="beforeRemove"

      :on-change="fileListChange"

      multiple

      :limit="4"

      :on-exceed="handleExceed"

      :file-list="fileList"

    >

      <el-button size="small" type="primary">点击上传</el-button>

      <div slot="tip" class="el-upload__tip">

        只能上传jpg/png文件,且不超过500kb

      </div>

    </el-upload>

    <el-button size="small" type="primary" @click="submitFn">提交</el-button>

  </div>

</template>

<script>

export default {

  data() {

    return {

      fileList: [

        {

          name: "food.jpeg",

          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",

        },

        {

          name: "food2.jpeg",

          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",

        },

      ],

    };

  },

  methods: {

    fileListChange(file) {

      this.fileList = [file];

    },

    handleRemove(file, fileList) {

      console.log(file, fileList);

      this.fileList = [];

    },

    handlePreview(file) {

      console.log(file);

    },

    handleExceed(files, fileList) {

      this.$message.warning(

        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${

          files.length + fileList.length

        } 个文件`

      );

    },

    beforeRemove(file, fileList) {

      return this.$confirm(`确定移除 ${file.name}？`).then(() => {

        this.fileList = fileList;

        //  this.handleRemove();

      }).catch(()=>{

        fileList.splice(index,0,this.fileList[index])

        this.$message({

          type:'info',

          message:'已取消提交'

        })

      });

    },

    async submitFn() {//Form Data格式

      let formData = new FormData();

      this.fileList.map((item) => {

        formData.append("file", item.row);

      });

      const res = await post("/api/uploadFile", formData, {

        headers: { "Content-Type": "multipart/form-data" },

      });

    },

  },

};

</script>