anrui/anrui-scm/anrui-scm-ui/src/components/uploadFile/upload.vue

<template>
  <div>
    <!--    <el-upload class="upload-demo" :data="datas" :accept="accept" :on-success="uploadImgSuccess"-->
    <!--               :on-change="handleChange" :on-remove="handleRemove" :file-list="fileList_FuJian"-->
    <!--               :http-request="uploadSectionFile">-->
    <!--      <el-button size="small" type="primary">点击上传</el-button>-->
    <!--      <div slot="tip" class="el-upload__tip">单个文件大小不允许超过100M,支持上传文件类型：{{ accept }}</div>-->
    <!--    </el-upload>-->
    <!--        <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"
               :on-preview="handlePictureCardPreview">
      <el-button size="small" type="primary">点击上传</el-button>
      <!-- <el-button v-show="isview" size="small" type="primary" @click="view()">查看</el-button> -->
      <!-- <div slot="tip" class="el-upload__tip">单个文件大小不允许超过100M,支持上传文件类型：{{ accept }}</div> -->
    </el-upload>
  </div>
</template>

<script>
  import { uploadFile } from '@/api/portal/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,
        stateName: ''
      }
    },
    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.stateName = 'xunidingjinAdd') {
          //   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.stateName = 'xunidingjinAdd'
        this.files = imgList
        console.log('回显图片', 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
      },
      // 上传失败
      uploadError() {
        this.loadding = false
      },
      uploadProgrees(event, file, fileList) {
        if (Number(event.percent) > 0) {
          this.loadding = true
        }
      }
    }
  }
</script>

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