问题反馈，图片上传

<template>
  <el-dialog :visible.sync="dialogService" width="720px" class="dialog-customer-service">
    <div class="txr-dialog">
      <div class="txr-dialog-header">
        <span class="txr-header-title">问题反馈</span>
        <button class="el-dialog__headerbtn" type="button" @click="closeServiceDialog"><i class="el-dialog__close el-icon el-icon-close"></i></button>
      </div>

      <div class="txr-dialog-content">
        <div class="form-item">
          <el-input class="item-textarea" type="textarea" v-model="formService.text" rows="5" placeholder="问题详情描述" spellcheck="false"></el-input>
        </div>

        <el-upload class="form-upload" action="#" :limit="8" :on-exceed="handleExceed" ref="elUpload" list-type="picture-card" :on-change="beforeUpload"
          :auto-upload="false">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
            <span class="el-upload-list__item-actions">
              <!-- <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                <i class="el-icon-zoom-in"></i>
              </span> -->
              <!-- <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                <i class="el-icon-download"></i>
              </span> -->
              <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>

        <!-- <el-dialog :visible.sync="dialogVisible" width="70%" top="15vh" append-to-body>
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog> -->

        <div class="form-item">
          <span class="item-title">联系方式</span>
          <el-input class="item-phone" v-model="formService.phone" placeholder="手机号码"></el-input>
        </div>
        <div class="form-item" style="flex-direction: column;align-items: flex-start;">
          <p class="item-title item-service">电话客服：{{formService.service_phone}}</p>
          <p class="item-title item-service">QQ客服：{{formService.service_qq}}</p>
          <p class="item-sub-title">(周一至周五，09:00-18:00)</p>
        </div>

        <div class="btns">
          <button class="btn submit" @click="submitUpload">提交</button>
          <button class="btn cancel" @click="closeServiceDialog">取消</button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { mapState } from "vuex";
import Axios from "axios";

export default {
  data() {
    return {
      formService: {
        text: "",
        phone: "",
        service_phone: "400-400-4000",
        service_qq: "88888888",
      },
      fileData: null,
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  computed: {
    ...mapState("Dialogs", ["dialogServiceVisible"]),
    dialogService: {
      get() {
        return this.dialogServiceVisible;
      },
      set(val) {
        this.$store.commit("Dialogs/SET_SERVICE_DIALOG", val);
      },
    },
  },
  methods: {
    closeServiceDialog() {
      this.$store.commit("Dialogs/SET_SERVICE_DIALOG", false);
    },

    handleRemove(file) {
      let uploadFiles = this.$refs.elUpload.uploadFiles;
      uploadFiles.forEach((value, index) => {
        if (value.uid === file.uid) {
          uploadFiles.splice(index, 1);
        }
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择上传8个图片文件`);
    },

    submitUpload() {
      // this.fileData = new FormData();
      // this.$refs.elUpload.submit();

      debugger;

      let fileData = new FormData();
      let fileList = this.$refs.elUpload.uploadFiles;
      fileList.map((item) => {
        fileData.append("file", item.raw);
      });
      fileData.append("text", this.formService.text);
      fileData.append("phone", this.formService.phone);
      fileData.append("service_phone", this.formService.service_phone);
      fileData.append("service_qq", this.formService.service_qq);

      Axios.post("/api/game/list", fileData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })
        .then((res) => {})
        .catch((err) => {
          this.$message.error("上传失败，网络请求错误");
          this.loading.close();
          this.upload = false;
        });
    },

    beforeUpload(params) {
      const file = params.raw,
        fileType = file.type,
        isImage = fileType.indexOf("image") !== -1,
        isLt2M = file.size / 1024 / 1024 < 2;

      let uploadFiles = this.$refs.elUpload.uploadFiles;
      let fileIndex = uploadFiles.findIndex((s) => s.uid === params.uid);

      if (!isImage) {
        this.$message.warning("只能上传图片格式png、jpg、gif!");

        uploadFiles.splice(fileIndex, 1);
        return;
      }
      if (!isLt2M) {
        this.$message.warning("上传图片应小于2M");

        uploadFiles.splice(fileIndex, 1);

        return;
      }

      return file;
    },
  },
};
</script>

<style lang="less" scoped>
.txr-dialog-content {
  padding: 0 20px;
  position: relative;

  .form-item {
    margin-top: 18px;
    display: flex;
    align-items: center;

    .item-textarea {
      /deep/ textarea {
        font-family: "puhui";
        background: #1f2225;
        border: unset;
        margin-top: 0px;
        margin-bottom: 0px;
        border-radius: 13px;
        padding: 15px 20px;
        color: #ffffffd6;
        font-size: 14px;
        max-height: 200px;
      }

      /deep/ ::-webkit-input-placeholder {
        // color: #1890ff;
      }
    }

    .item-title {
      min-width: 70px;
      color: white;
    }

    .item-service {
      margin-top: 7px;
    }
    .item-sub-title {
      margin-top: 5px;
      color: #ffffff66;
    }

    .item-phone {
      width: 180px;

      /deep/ input {
        background: #1f2225;
        border-color: #1f2225;
      }
    }
  }

  .form-upload {
    margin-top: 18px;

    /deep/ .el-upload--picture-card {
      width: 100px;
      height: 100px;
      line-height: 100px;
    }
    /deep/ .el-upload-list--picture-card .el-upload-list__item {
      width: 100px !important;
      height: 100px !important;
      line-height: 100px;
      transition: all 0.3s;
    }

    /deep/ .el-upload-list--picture-card .el-upload-list__item > div {
      height: 100%;
    }

    /deep/ .el-upload-list__item-thumbnail {
      object-fit: cover;
    }
  }

  .btns {
    // position: absolute;
    // bottom: 22px;
    // left: 50%;
    // transform: translate(-50%, 0);
    margin-top: 50px;
    margin-bottom: 22px;
    text-align: center;

    button {
      width: 80px;
      height: 30px;
      line-height: 30px;
      border-radius: 6px;
    }
    .submit {
      margin-right: 20px;
    }
    .cancel {
      background: #1f2225;
      color: white;
    }
  }
}
</style>