vue后台实现上传文件_vue上传文件到后端

  data() {

    return {

      //   图表数据

      tableData: null,

      // 文件

      upload: {

        fileList: [],

        fileName: [],

      },

    };

  },

html代码

<el-upload

                ref="upload"

                :limit="1"

                accept=".xls,.xlsx"

                name="files"

                :multiple="true"

                :action="logoUpload.url"  //上传的地址 自己给

                :headers="logoUpload.headers"  //请求头  自己给

                :on-change="handleFileChange"

                :before-remove="handleFileRemove"

                :auto-upload="false"

                :file-list="upload.fileList"

              >

                <el-button

                  slot="trigger"

                  size="small"

                  type="primary"

                  style="margin-right: 20px; width: 118px"

                  >选取文件</el-button

                >

              </el-upload>

              <el-button type="primary" size="small" v-if="upload.fileList.length!=0" @click="submitFileForm"

                >确 定</el-button

              >

js代码

  // 导入模块

    // 上传发生变化钩子

    handleFileChange(file, fileList) {

      this.upload.fileList = fileList;

    },

    // 删除之前钩子

    handleFileRemove(file, fileList) {

      this.upload.fileList = fileList;

    },

    // 提交上传文件 form表单的方式提交

    submitFileForm() {

      // 创建新的数据对象

      let formData = new FormData();

      if (this.upload.fileList == []) {

        this.msgSuccess("请先选取数据！");

        return;

      }

      // 将上传的文件放到数据对象中

      this.upload.fileList.forEach((file) => {

        formData.append("file", file.raw);

        this.upload.fileName.push(file.name);

      });

      console.log("提交前", formData.getAll("file"));

      // 文件名

      formData.append("fileName", this.upload.fileName);

      // 自定义上传  使用后端给的接口进行上传文件

      up(formData).then((res) => {

        console.log(res);

        if (res.code == 200) {

          this.$refs.upload.clearFiles();

          this.msgSuccess("上传成功！");

        } else {

          this.$message.error("上传失败！");

        }

      });