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

<template>
  <div>
    <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" :show-file-list="false" :multiple="true">
      <el-button size="mini" type="primary">点击上传</el-button>
    </el-upload>
  </div>
</template>

<script>
import { uploadFile_yanchejiancha } from '@/api/portal/Upload'
import { getStorage } from '@/utils/auth.js'

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,.JPG,.JPEG'
    },
    // 文件名称
    name: {
      type: Array,
      required: true
    },
    uploadData: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      accessToken: null,
      uploadFile: uploadFile_yanchejiancha,
      fileList_FuJian: [],
      enclosure: '',
      file_add: '',
      file_catch: '',
      files: [],
      files_list: [],
      filedUrl: '',
      // fileUrl: fileUrl,
      // showpicture:false,
      isview: false,
      nameArr: '',
      loadding: false,
      stateName: '',
      /*  uploadData: { modelSid: '' },*/
      sid: ''
    }
  },
  watch: {
    name: {
      deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        console.log('aaaa1', newVal)
        this.files = newVal
        console.log('aaaa2', this.files)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.Init()
    })
  },
  created() {
    this.uploadFile = uploadFile_yanchejiancha // 接口
    this.accessToken = {
      token: getStorage()
    }
  },
  methods: {
    view() {
      // window.open(this.filedUrl)
    },
    showImg(sid) {
      //  this.uploadData.sid = sid
    },

    // 页面第一次加载
    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) {
      let _this = this
      console.log('您选择的file:', file)
      //  console.log('您传递的data:', _this.uploadData)
      if (file.response.code === '200') {
        this.loadding = false
        // 返显图片
        this.filedUrl = this.fileUrl + file.response.data
        // var uid = file.response.data
        const files = []
        files.push({
          name: file.response.data.sourceFileName,
          url: file.response.data.fullUrl,
          size: file.response.data.size
        })
        this.$emit('change', files)
        this.$emit('eett', files)
        // this.getUrl()
        // SaveList(this.tempInfo).then(response => {
        //   if (response.success) {
        //   }
        // })
      }
    },
    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 scoped></style>