fj-dc-ui/.svn/pristine/2d/2d051142eef827d8a7d04e3179b6757cab9468bc.svn-base

<!--
<upload ref="uploadFile" url="/biz/hzz/basic/file/upload?bizId=" @uploadOver="uploadOver"></upload>
if (this.$refs.uploadFile.submitUpload(id)) {
  // true上传列表为空，直接执行结束操作
  this.insertOver()
}
-->

<template>
  <div style="width: 420px;margin: 20px auto;">
    <el-upload
      ref="upload"
      class="upload-demo"
      :action="allurl"
      :accept="accept"
      :headers="header"
      :auto-upload="false"
      :before-upload="beforeUpload"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-change="changeFileList"
      :on-success="uploadSuccess"
      :on-error="upError"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <el-form ref="form" label-width="80px" style="margin-top: 20px;">
      <el-form-item label="描述信息">
        <el-input v-model="description" type="textarea" rows="3"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  props: ["url","accept"], // 上传基础路径
  data() {
    return {
      fileList: [],
      resList: [],
      length: 0, // 上传列表长度
      sum: 0, // 上传成功次数
      allurl: "", // 上传完整路径
      header: {
        'persId': localStorage.getItem('userid'),
        'accessToken' : localStorage.getItem('accessToken')
      },
      dialogImageUrl: '',
      dialogVisible: false,
      description: ''
    };
  },
  computed:{
    userid(){
      return localStorage.getItem('userid') ? localStorage.getItem('userid') : ''
    }
  },
  methods: {
    // 初始化，
    init() {
      this.$refs.upload.clearFiles();
      this.length = 0;
      this.sum = 0;
      this.allurl = "";
      this.resList = [];
    },
    // 开始上传，文件列表为空直接返回turn表示结束，不为空触发上传并返回false，由uploadOver判断结束时间
    submitUpload(id,type) {
      this.allurl = `${this.url}${id}&bizType=${type}&keyWord=${this.description}`;
      if (this.length) {
        this.$nextTick(() => {
          this.$refs.upload.submit();
          this.description = ''
        });
        return false;
      } else {
        return true;
      }
    },
    // 上传出错，向上触发结束
    upError(err, file, fileList) {
      this.$message.error("上传出错，请修改文件！");
      this.$emit("uploadOver");
      this.init();
    },
    // 全部上传成功，向上触发结束
    uploadSuccess(response, file, fileList) {
      this.resList.push(response.data);
      console.log(this.resList);
      this.sum = this.sum + 1;
      if (this.sum == this.length) {
        this.$emit("uploadOver", this.resList);
        this.init();
      }
    },
    // 及时更新列表长度
    changeFileList(file, fileList) {
      this.length = fileList.length;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    beforeUpload(file, fileList) {
        if (file.size / (1024 * 1024) > 100) {  // 限制文件大小
            this.$message.warning(`当前限制文件大小不能大于100M`)
            return false
        }
    }
  }
};
</script>