上传（图片文件）

<template>
  <el-dialog :visible="showDialogSystem" width="width">
    <div slot="title">
      <div class="example-1">
        <dp-title-line text="新增汇聚任务"></dp-title-line>
      </div>
    </div>
    <div class="form">
      <div class="btn">
        <dp-subtitle text="任务信息" />
        <div>
          <el-button @click="saveUpload">保存</el-button>
          <el-button @click="cancel">取消</el-button>
        </div>
      </div>
      <el-form label-width="80px">
        <el-form-item label="任务类别">
          <el-select v-model="collectFileType" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option
          ></el-select>
        </el-form-item>
      </el-form>
      <div class="upData">
        <div class="basics">
          <span>文件上传</span>
          <el-upload
            class="upload-demo"
            ref="mYupload"
            action
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :http-request="uploadFile"
            show-file-list
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button size="mini" icon="el-icon-upload">上传文件</el-button>
          </el-upload>
          <em>限制上传一个文件</em>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    showDialogSystem: {
      type: Boolean,
      default: false
    },
    params: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      one: '',
      two: '',
      collectFileType: '',
      fileBox: {},
      title: '',
      fileList: [],
      options: [
        { label: '备份库', value: '1' },
        { label: '基础数据', value: '2' },
        { label: '报告文书', value: '3' },
        { label: '影像文件', value: '4' },
        { label: '业务数据', value: '5' }
      ]
    }
  },
  methods: {
    cancel() {
      this.clearFiles()
      this.collectFileType = ''
      this.$emit('closeDailog', false)
    },
    handleRemove(file, fileList) {
      this.fileBox = {}
      console.log(file, fileList)
    },
    uploadFile(item) {
      // let FormDatas = new FormData()
      this.fileBox = item.file
      // FormDatas.append('file', item.file)
    },
    onsuccess(response, file, fileList) {
      console.log('response, file, fileList==', response, file, fileList)
    },
    handlePreview(file) {
      console.log('===', file)
    },
    beforeRemove(file, fileList) {
      console.log('res==', file)
      return this.$confirm(`确定移除 ${file.name}?`)
    },
    handleExceed() {
      this.$message.error(`当前限制上传一个文件`)
    },
    clearFiles() {
      this.$refs['mYupload'].clearFiles()
    },
    async saveUpload() {
      console.log('this.from', this.collectFileType)
      if (!this.collectFileType) {
        this.$message.error('请选择任务类别')
        return
      } else if (JSON.stringify(this.fileBox) === '{}') {
        this.$message.error('请上传文件')
        return
      }
      await this.$store.dispatch('dataTask/xdsTaskadd', {
        file: this.fileBox,
        collectFileType: this.collectFileType
      })
      this.cancel()
    }
  }
}
</script>

 async xdsTaskadd({ state, dispatch }, params = {}) {
    try {
      let FormDatas = new FormData()
      FormDatas.append('file', params.file)
      FormDatas.append('collectFileType', params.collectFileType)
      FormDatas.append('sourceCode', state.systemObj.sourceCode)
      FormDatas.append('systemCode', state.systemObj.systemCode)
      Message.success('正在保存文件中...')
      const res = await DataTask.queryXdsTaskadd(FormDatas)
      if (res.code === '200') {
        Message.success('新增成功')
        dispatch('mainList')
      }
    } catch (error) {}
  }
}

export function queryXdsTaskadd(data) {
  return request({
    url: systemApiPath + '/lrhealth/datasource/xds/taskadd',
    method: 'post',
    data
  })
}

const service = axios.create({
  baseURL:
    process.env.VUE_APP_REAL_ROUTER_BASE.replace(/\/$/, '') +
    (process.env.VUE_APP_BASE_API ?? '/api'), // url = base url + request url
  withCredentials: true,
  timeout: 36000 // request timeout
})

service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['X-Token'] = getToken()
    }
    return config
  },
  error => {
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

service.interceptors.response.use(
  response => {
    const res = response
    // 未设置状态码则默认成功状态
    const code = res.data.code || 200
    const message = res.data.message
    // 二进制数据则直接返回
    if (
      res.request.responseType === 'blob' ||
      res.request.responseType === 'arraybuffer'
    ) {
      return res.data
    }
    if (code != 200) {
      Notification.error({
        title: message
      })
      return Promise.reject('error')
    } else {
      return res.data
    }
  },
  error => {
    Message({
      message: error.message,
      type: 'error',
      duration: 4 * 1000
    })
    return Promise.reject(error)
  }
)

export default service