xy-frontend/src/views/realTimeMonitor/components/uploadpic.vue

<template>
  <el-dialog
    class="uploadPic"
    title="上传图片"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    width="600px"
    @close="handleclose"
  >
    <div class="uploadBox">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="装置编号">
          <el-input v-model="form.cmdid"></el-input>
        </el-form-item>
        <el-form-item label="装置Id">
          <el-input v-model="form.termid"></el-input>
        </el-form-item>
        <el-form-item label="通道选择">
          <el-select v-model="form.channel" placeholder="选择通道">
            <el-option label="通道一" :value="1"></el-option>
            <el-option label="通道二" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择时间">
          <el-date-picker
            v-model="form.phototime"
            value-format="timestamp"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="">
          <el-upload
            class="upload-demo"
            ref="upload"
            action="#"
            :http-request="httpRequest"
          >
            <el-button slot="trigger" size="small" type="primary"
              >选取图片</el-button
            >
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="isShow = false">取 消</el-button>
      <el-button type="primary" @click="handlesure">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { uploadPicApi } from "@/utils/api/index";
export default {
  props: {},
  data() {
    return {
      isShow: false,
      form: {},
      fileList: [], //上传列表
    };
  },
  mounted() {},
  methods: {
    httpRequest(raw) {
      this.fileList.push(raw);
    },
    //数据库获取最新数据
    display(data) {
      console.log(data);
      this.$set(this.form, "cmdid", data.cmdid);
      this.$set(this.form, "termid", data.id);
      this.isShow = true;
    },
    handleclose() {
      this.isShow = false;
      this.fileList = [];
    },
    handlesure() {
      this.isShow = false;
      //console.log(this.fileList[0].file);
      this.$set(this.form, "file", this.fileList[0].file);
      console.log(this.form);
      uploadPicApi(this.form)
        .then((res) => {
          console.log(res);
          this.$message({
            duration: 1500,
            showClose: true,
            message: "上传成功",
            type: "success",
          });
          this.fileList = [];
        })
        .catch((err) => {});
    },
  },
  destroyed() {
    this.isShow = false;
  },
};
</script>
<style lang="less">
.uploadPic {
  .uploadBox {
  }
  .upload-demo {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    margin-right: 16px;
    .el-upload-list {
      width: 370px;
      height: 32px;
      line-height: 32px;
      border: 1px solid #dcdfe6;
      background: #fff;
      margin-right: 12px;
      border-radius: 4px;
      .el-upload-list__item-name {
        margin-right: 0px;
      }
      .el-upload-list__item {
        transition: none;
        font-size: 14px;
        color: #606266;
        position: relative;
        box-sizing: border-box;
        border-radius: 4px;
        width: 100%;
        height: 32px;
        line-height: 32px;
        margin-top: 0px !important;
        .el-icon-close {
          top: 10px;
        }
      }
    }
  }
}
</style>