wms-ui-admin/src/components/uploadFile/ManyImageUpload.vue

<template>
  <div>
    <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>
      <!-- <button @click="test()">test</button> -->
    </div>
    <el-dialog :visible.sync="showpicture" :append-to-body="true" title="查看图片">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
  import {
    uploadFile
  } from '@/api/portal/Upload.js'
  import {
    getStorage
  } from '@/utils/auth.js'
  import {
    mapGetters
  } from 'vuex'
  export default {
    model: {
      prop: 'imageFileList',
      event: 'fileListChange'
    },
    props: {
      placeholder: {
        type: String,
        default: ''
      },
      // 长度
      width: {
        type: String,
        default: '270px'
      },
      // 图片路径--全路径
      imageFileList: {
        type: Array,
        required: []
      },
      num: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        dialogImageUrl: '',
        accessToken: null,
        uploadFile: uploadFile,
        files: [],
        showpicture: false,
        loadding: false
      }
    },
    computed: {
      ...mapGetters([
        'id',
        'departmentCode',
        'departmentLevel',
        'departmentType',
        'token'
      ])
    },
    watch: {
      imageFileList: {
        deep: true,
        immediate: true,
        handler(newVal, oldVal) {
          // debugger
          console.log('aaaa1', newVal)
          this.files = []
          this.$nextTick(() => {
            for (var i = 0; i < newVal.length; i++) {
              // debugger
              this.files.push({
                name: newVal[i],
                url: newVal[i],
                // fullUrl: newVal[i]
              })
            }
          })
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.Init()
      })
    },
    created() {
      this.uploadFile = uploadFile // 接口
      this.accessToken = {
        'token': getStorage()
      }
      console.log('token', this.accessToken)
      // console.log('imageFileList', this.imageFileList)
    },
    methods: {
      // 页面第一次加载
      Init() {
        // 1. 文件上传用token
        // this.accessToken = {
        //   token: this.token
        // }
        //
        console.log('aaaa2', this.imageFileList)
        if (this.imageFileList !== undefined) {
          this.files = []
          for (var i = 0; i < this.imageFileList.length; i++) {
            // console.log('aaaa', i)
            this.files.push({
              name: this.imageFileList[i],
              url: this.imageFileList[i]
            })
          }
        }
      }, // 上传方案--成功后执行
      uploadImgSuccess_FuJian(response, file, ImageFileList) {
        console.log('上传成功!')
        // debugger
        this.loadding = false
        if (file.response.code === '200') {
          // debugger
          // 返显图片
          this.dialogImageUrl = file.response.data.fullUrl
          var uid = file.response.data
          this.files.push({
            name: file.response.data.sourceFileName,
            url: file.response.data.fullUrl,
            // url: file.response.data.fullUrl,
            // fullUrl: file.response.data.fullUrl,
            // size: file.response.data.size,
            // sourceFileName: file.response.data.sourceFileName
          })
          const imgFiles = []
          this.files.forEach(o => {
            imgFiles.push(o.url)
          })
          this.$emit('fileListChange', imgFiles)
          console.log('上传成功：' + JSON.stringify(this.files))
          // this.$emit('fileChange', this.files)
        }
      },
      removeImage(file, ImageFileList) {
        console.log('删除照片',file)
        this.files.splice(this.files.indexOf(file), 1)
        console.log('删除照片',this.files)
        const imgFiles = []
        this.files.forEach(o => {
          imgFiles.push(o.url)
        })
        this.$emit('fileChange', this.files,imgFiles)
      },
      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)
      },
      test() {
        console.log('aaa', this.files)
        this.$set(this.files, this.files)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 250px;
    line-height: 100px;
    text-align: center;
  }

  .avatar {
    width: 200px;
    height: 200px;
    display: block;
    //   float: left;
  }
</style>