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

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

<script>
import { uploadFile_yanchejiancha } from '@/api/portal/Upload.js'
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: ''
    },
    multiple: {
      type: Boolean,
      default: true
    },
    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
    }
  },
  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: {
    showImg(imgList) {
      this.files = imgList
      console.log('123123123', this.files)
    },
    view() {
      // window.open(this.filedUrl)
    },
    // 页面第一次加载
    Init() {
      console.log(this.name, 78788)
      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]
          })
        }
      }
    },
    handlePictureCardPreview(file) {
      console.log(this.file)
      this.dialogVisible = true
      this.dialogImageUrl = file.url
    },
    // 上传方案--成功后执行
    uploadImgSuccess_FuJian(response, file) {
      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)
    },
    // 上传失败
    uploadError() {
      this.loadding = false
    },
    uploadProgrees(event, file, fileList) {
      if (Number(event.percent) > 0) {
        this.loadding = true
      }
      //   console.log('event:', event)
    }
  }
}
</script>

<style scoped></style>