anrui/anrui-management/anrui-management-ui/src/components/uploadFileimg/upload_head.vue

<template>
  <div>
    <el-upload
      ref="imgUpload"
      v-loading="loadding"
      class="avatar-uploader"
      :headers="accessToken"
      :action="uploadFile"
      accept=".jpg,.jpeg,.png,.bmp,.pdf,.JPG,.JPEG,.BMP"
      list-type="picture-card"
      :file-list="files"
      :on-remove="removeImage"
      :on-preview="handlePictureCardPreview"
      :on-progress="uploadProgrees"
      :on-error="uploadError"
      :on-success="uploadImgSuccess_FuJian"
    >
      <i class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
    <el-dialog
      :visible.sync="dialogVisible"
      :append-to-body="true"
      title="查看图片"
    >
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>

    <!--    <el-upload list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">-->
    <!--      <i class="el-icon-plus"></i>-->
    <!--    </el-upload>-->
    <!--    <el-dialog :visible.sync="dialogVisible">-->
    <!--      <img width="100%" :src="dialogImageUrl" alt="">-->
    <!--    </el-dialog>-->

    <!--    <el-upload class="upload-demo" :headers="accessToken" :action="uploadFile" :accept="accept" :data="uploadData" :on-success="uploadImgSuccess_FuJian" :on-remove="handleRemove" :file-list="fileList_FuJian">-->
    <!--      <el-button size="small" type="primary">点击上传</el-button>-->
    <!--      &lt;!&ndash; <el-button v-show="isview" size="small" type="primary" @click="view()">查看</el-button> &ndash;&gt;-->
    <!--      &lt;!&ndash; <div slot="tip" class="el-upload__tip">单个文件大小不允许超过100M,支持上传文件类型：{{ accept }}</div> &ndash;&gt;-->
    <!--    </el-upload>-->
  </div>
</template>

<script>
import { uploadFile } from "@/api/Common/Upload.js";
import { getStorage } from "@/utils/auth.js"; //token
import { mapGetters } from "vuex";

export default {
  model: {
    prop: "name",
    event: "change",
  },
  props: {
    placeholder: {
      type: String,
      default: "",
    },
    bucket: {
      type: String,
      default: "abc",
    },
    // 长度
    width: {
      type: String,
      default: "270px",
    },
    limit: {
      type: Number,
      default: 1,
    },
    accept: {
      type: String,
      default:
        ".jpg,.jpeg,.png,.bmp,.pdf,.JPG,.JPEG,.BMP,.PDF,.xls,.docx,.xlsx,.ppt,.pptx",
    },
    // 文件名称
    name: {
      type: Array,
      required: true,
    },
    uploadData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      accessToken: null,
      uploadFile: uploadFile,
      fileList_FuJian: [],
      enclosure: "",
      file_add: "",
      file_catch: "",
      files: [],
      files_list: [],
      filedUrl: "",
      // fileUrl: fileUrl,
      // showpicture:false,
      isview: false,
      nameArr: "",
      loadding: false,
    };
  },
  computed: {
    ...mapGetters([
      "id",
      "departmentCode",
      "departmentLevel",
      "departmentType",
      "token",
    ]),
  },
  watch: {
    name: {
      deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        console.log("aaaa1", newVal);
        this.files = newVal;
        if (this.files.length > 1) {
          this.files.splice(0, 1);
        }
        console.log("aaaa2", this.files);
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.Init();
    });
  },
  created() {
    this.uploadFile = uploadFile; // 接口
    this.accessToken = {
      token: getStorage(),
    };
  },
  methods: {
    showImg(imgList) {
      this.files = imgList;
      console.log("123123123", this.files);
    },
    view() {
      // window.open(this.filedUrl)
    },
    // 页面第一次加载
    Init() {
      if (this.name !== undefined) {
        this.files = [];
        for (var i = 0; i < this.name.length; i++) {
          this.files.push({
            name: this.name[i],
            url: this.name[i],
          });
        }
      }
    },
    // 上传方案--成功后执行
    uploadImgSuccess_FuJian(response, file, fileList) {
      console.log("您选择的file:", file);
      if (file.response.code === "200") {
        this.loadding = false;
        // 返显图片
        this.filedUrl = this.fileUrl + file.response.data;
        // var uid = file.response.data
        this.files.push({
          name: file.response.data.sourceFileName,
          url: file.response.data.fullUrl,
          size: file.response.data.size,
        });
        this.$emit("change", this.files);
        this.$emit("eett", this.files);
      }
    },

    removeImage(file, ImageFileList) {
      this.files.splice(this.files.indexOf(file), 1);
      const imgFiles = [];

      this.files.forEach((o) => {
        imgFiles.push(o.url);
      });
      this.$emit("fileChange", this.files);
    },
    handleRemove(file, fileList) {
      console.log("file:" + JSON.stringify(file));
      console.log("fileList:" + JSON.stringify(fileList));
      this.enclosure = "";
      // 1. 保存新增文件id(this.file_add)
      this.getNewFileId(fileList);
      // 2. 保存数据库读取的已有文件id(this.file_catch)
      this.getCatchFileId(file);
      // 3. 保存并拼接id
      this.getFileId();
      // 4. 返回拼接id
      this.$emit("change", this.enclosure);
    },
    // 返回this.file_add(新上传文件的id拼接集合)
    getNewFileId(fileList) {
      // debugger
      this.file_add = "";
      for (var i = 0; i < fileList.length; i++) {
        if (fileList[i].response && fileList[i].response.code === "200") {
          this.file_add = this.file_add + fileList[i].response.data + ",";
        }
      }
      if (this.file_add !== "") {
        this.file_add = this.file_add.substring(0, this.file_add.length - 1);
      }
      // console.log('1. this.file_add: ' + this.file_add)
    },
    // 返回this.file_catch（数库一寸照的文件的id的拼接集合）
    getCatchFileId(file) {
      for (var i = 0; i < this.files_list.length; i++) {
        if (this.file_catch !== "") {
          // 1. 检查当前删除的文件是否是修改文件列表里面的，如果是，将修改列表里去除此id
          if (this.files_list[i].name === file.name) {
            // 2. 拆开file_catch到fils_arry
            var fils_arry = this.file_catch.split(",");
            // 3. 从fils_arry去除 this.files_list[i].id
            var arry = [];
            fils_arry.forEach((element) => {
              // 不加载文件里面的
              if (element !== this.files_list[i].id) {
                arry.push(element);
              }
            });
            // 4. 重新拼接成file_catch
            this.file_catch = arry.join(",");
          }
        }
      }
      // console.log('2. this.file_catch:' + this.file_catch)
    },
    // 保存并拼接id
    getFileId() {
      // console.log('3. this.file_catch:' + this.file_catch + ',this.file_add:' + this.file_add)
      if (this.file_catch !== "") {
        if (this.file_add !== "") {
          this.enclosure = this.file_catch + "," + this.file_add;
        } else {
          this.enclosure = this.file_catch;
        }
      } else {
        this.enclosure = this.file_add;
      }
    },
    handlePictureCardPreview(file) {
      // this.dialogImageUrl = file.url
      // this.dialogImageUrl = file.fullUrl
      this.dialogImageUrl = file.url;
      // this.showpicture = true
    },
    // 上传失败
    uploadError() {
      this.loadding = false;
    },
    uploadProgrees(event, file, fileList) {
      if (Number(event.percent) > 0) {
        this.loadding = true;
      }
      //   console.log('event:', event)
    },
  },
};
</script>

<style lang="scss" scoped></style>