anrui/anrui-base/anrui-base-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>
  </div>
</template>

<script>
import { imgUploadz } from '@/api/jichuxinxi/baseaffiliatcompany'
import { mapGetters } from 'vuex'
export default {
  props: {
    placeholder: {
      type: String,
      default: '',
    },
    // 长度
    width: {
      type: String,
      default: '270px',
    },
    accept: {
      type: String,
      default:
        '.jpg,.jpeg,.png,.bmp,.pdf,.JPG,.JPEG,.BMP,.PDF,.xls,.docx,.xlsx,.ppt,.pptx',
    },
    // 文件列表
    files: {
      type: String,
      required: true,
    },
    // 文件名称
    name: {
      type: String,
      required: true,
    },
    types:{
      type:String,
      required: true,
    },
    linkChange: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      datas: null,
      types:types,
      accessToken: {},
      fileList_FuJian: [],
      enclosure: '',
      file_add: '',
      idsz: '',
      file_catch: '',
      files_list: [],
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'departmentCode',
      'departmentLevel',
      'departmentType',
      'token',
    ]),
  },
  watch: {
    files: {
      deep: true,
      handler(val) {
        this.pageLoad(val, '')
      },
    },
  },
  creatd() {
    this.datas = { type: this.types }
    // console.log(this.datas,7777777)
    console.log(this.type, '船只被')
  },
  mounted() {
    this.$nextTick(() => {
      // this.Init()
    })
  },
  methods: {
    // 页面第一次加载
    Init() {
      // 1. 文件上传用token
      // this.accessToken = {
      //   token: this.token,
      // }
      this.pageLoad(this.files)
    },
    handleChange(file, fileList) {
    },
    // 传入数据并绑定
    pageLoad(files) {
      // console.log('传入：' + files)
      if (files !== null && files !== '') {
        this.files_list = JSON.parse(files)
        var ids = ''
        this.fileList_FuJian = []
        // 1. 回显页面
        for (var i = 0; i < this.files_list.length; i++) {
          var body = {
            name: this.files_list[i].name,
            url: '',
            status: 'finished',
          }
          this.fileList_FuJian.push(body)
          ids = ids + this.files_list[i].id + ','
        }
        // 2. 回存文件id
        if (ids !== '') {
          ids = ids.substring(0, ids.length - 1)
        }
        this.enclosure = ids
        this.file_catch = ids
      } else {
        this.file_add = ''
        this.file_catch = ''
        this.enclosure = ''
        this.files_list = []
        this.fileList_FuJian = []
      }
    },
    // 上传方案--成功后执行
    uploadImgSuccess(response, file, fileList) {
      // console.log('fileList:' + JSON.stringify(fileList))

      // this.enclosure = ''
      // 1. 保存新增文件id(this.file_add)
      // this.getNewFileId(fileList)
      // 2. 保存并拼接id
      // this.getFileId()
      // console.log('4. 返回拼接：' + this.enclosure)
      // 3. 返回拼接id
      this.$emit('change', this.enclosure)
    },
    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
      if (this.idsz != '') {
        this.$emit('handleRemove', this.idsz)
      }
    },
    // 上传文件 FrontPhoto
    uploadSectionFile(params) {
      const file = params.file
      // 根据后台需求数据格式
      const form = new FormData()
      console.log('77777777777777',form)
      // 文件对象
      form.append('file', file)
      // 项目封装的请求方法，下面做简单介绍
      console.log('988888',form.append)
      imgUploadz(form).then((res) => {
          // 自行处理各种情况
          if (res.code === '200') {
            res.data.attachType = this.types
            let a = ''
            a = res.data.filePath
            this.idsz = a
            this.$emit('handleSuccess', res)
          }
          // this.FrontPhoto = res.fullUrl
          if (res.msg == '操作成功') {
            this.$message({
              message: '上传成功！',
              type: 'success',
            })
          }
        })
        .catch((err) => {
          console.log(err)
          // 如果等于备案,就调备案图片上传接口
        })
    },
  },
}
</script>

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