vue iview附件上传下载

最新推荐文章于 2022-09-06 11:29:58 发布

原创最新推荐文章于 2022-09-06 11:29:58 发布 · 3.9k 阅读

1 ·

CC 4.0 BY-SA版权

仅作为自己学习的记录。本文为博主原创文章，可以转载，请标明出处。

vue 同时被 2 个专栏收录

18 篇文章

订阅专栏

iview

3 篇文章

订阅专栏

本文介绍了一个功能丰富的附件上传组件，支持多种格式文件的批量上传，包括图片、文档和压缩包等。组件具备预览、格式校验、大小限制及上传进度显示等功能，同时提供了上传、删除和下载附件的操作。

页面效果

附件上传

<Upload
    class="mar-t"  
    ref="upload"
    :show-upload-list="false" 
    :multiple="true"
    :format="['jpg','jpeg','png', 'pdf', 'zip', 'rar', 'xls', 'docx', 'txt']"
    :before-upload="handleBeforeUpload" 
    :on-format-error="handleFormatError" 
    :on-exceeded-size="handleMaxSize"
    :on-success="handleSuccess"
    :on-error="handleError"
    :data="{'uuid':this.uuids}"
    action="upDataUrl+'/netWork/addAtt'">
    <Button type="primary" style="width:768px;margin-bottom: 20px;">添加附件</Button>
</Upload>
<Table border :columns="columns1" :data="uploadList"></Table>

export default {
  data () {
    return {
      columns1: [
        {
          title: '文件名',
          key: 'name'
        },
        {
          title: '大小',
          key: 'sizes'
        },
        {
          title: '操作',
          key: '',
          render: (h, params) => {
            return h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.deleteAttBtn(params.index);
                  }
                }
              }, '删除')
          }
        }
      ],
      uploadList: [],
      upDataUrl:'',
    }
  },
  mounted (){
    this.upDataUrl = RESREQUESTPREFIX;
  },
  methods: {
    // 附件通用
    handleFormatError(file) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg、png、pdf、zip、rar、xls、docx、txt、格式的附件。'
      });
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: '超出文件大小限制',
        desc: '文件 ' + file.name + ' 太大，不能超过 100M。'
      });
    },
    // 生成uuid
    guid() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
        return v.toString(16);
      });
    },
    // 新增附件
    handleBeforeUpload(file) {
        // 创建一个 FileReader 对象
        let reader = new FileReader();
        reader.readAsDataURL(file);
    },
    // 附件上传成功返回
    handleSuccess(response,file){
      let reader = new FileReader();
        const _this = this;
        reader.formatBytes = function(a,b){
          if(0==a)return"0 Bytes";
          var c = 1024,
              d = b||2,
              e = ["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"],
              f = Math.floor(Math.log(a)/Math.log(c));
          return parseFloat((a/Math.pow(c,f)).toFixed(d))+" "+e[f];
        };
        //reader.onloadend = function (e) {
          // 限制100MB
          if(file.size < 104857600){
            file.sizes = reader.formatBytes(file.size);
            file.url = reader.result;
            console.log(111)
            console.log(file)
              _this.uploadList.push(file);
          };
        //};
      console.log(_this.uploadList)
      this.responseData = response;
      for(var i=0; i<response.length; i++){
        var fileUaId = response[i].uaId;
      };
      this.uaIds.push(fileUaId);
      console.log(this.uaIds)
      this.$Message.success('附件上传成功');
    },
    // 新增失败
    handleError(error,file){
      console.log(file);
    },
    // 删除附件
    deleteAttBtn(index, file) {
      let deleteUaId = this.responseData[index].uaId;
      let url = RESREQUESTPREFIX +'/netWork/deleteAnnexByUaid?uaId=' + deleteUaId;
      this.$http.delete(url).then(function(response){
        if(response.status === 200){
          this.$Message.success('删除成功');
          this.uploadList.splice(index, 1);
        };
      }, function () {
        this.$Message.error('删除失败,请检查接口是否正常!');
        // 失败回调
      });
    },
    // 附件下载
    downLoad(row){
      console.log(row)
      // 取当前路径
      let uaId = row.uaId;
      let filename = row.uaName;
      let url = RESREQUESTPREFIX+"/netWork/filename="+ filename + '?&uaId=' + uaId;
      this.$http.get(url).then(function(response){   
        this.content = response.data;
        const blob = new Blob([this.content])
        if (window.navigator.msSaveOrOpenBlob) {
          // 兼容IE10
          navigator.msSaveBlob(blob, filename)
        } else {
          //  chrome/firefox
          let aTag = document.createElement('a')
          aTag.download = filename;
          aTag.href = URL.createObjectURL(blob)
          aTag.click()
          URL.revokeObjectURL(aTag.href)
        }
      },function(response){  
          // 发生错误
          this.$Message.error('下载失败,请检查接口是否正常!');
      });
    },
  }
}