elment文件上传 展示点击下载

文件上传



            

              

                点击上传

              

            

          

//data 里面定义上传头部

data(){

return{

fileList: [],

 // 合同文件列表

      cceedcAppendixInfoList: [],

upload: {

        // 设置上传的请求头部

        headers: { Authorization: "Bearer " + getToken() },

        // 上传的地址

        url: process.env.VUE_APP_BASE_API + "/appendix/fileUpload",

        goodsUrl: process.env.VUE_APP_BASE_API + "/contract/goods/read",

        isUploading: false,

      },

}

}

methods(){

//on-success

 handleFileSuccess(response, file, fileList) {

      // console.log('response ',response )

      if (this.info.form == 'edit') {

        bindContract(this.form.id, response.data[0].id).then((response) => { });

      } else {

        var fileInfo = { "id": response.data[0].id };



        this.cceedcAppendixInfoList.push(fileInfo);



      }

    },

  // 文件上传失败

    upError(e) {

      this.$msg("上传失败", "error");

    },

    // 文件上传类型 上传大小

    beforeUpload(file) {

      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);

      const whiteList = ["pdf", "doc", "docx", "xls", "xlsx"];



      if (whiteList.indexOf(fileSuffix) === -1) {



        this.$msg("上传文件只能是 pdf、doc、docx、xls、xlsx格式", "error");

        return false;

      }



      //  上传大小

      // const isLt2M = file.size / 1024 / 1024 < 2;



      // if (!isLt2M) {

      //   this.$msg("上传文件大小不能超过 2MB", "error");

      //   return false;

      // }

    },

}

展示并点击下载文件

 

          

        



    downContractFile(val) {

      request({

       //接口

        url: '/appendix/downloadFile',

        method: 'get',

        params: {

          "appendixStorageName": val.appendixStorageName,  //展示的名字

          "appendixOriginalName": val.appendixOriginalName

        },

        responseType: 'blob'

      }).then((res) => {

        var filename = val.appendixOriginalName;

        var downloadElement = document.createElement('a');

        var href = window.URL.createObjectURL(new Blob([res])); //创建下载的链接   

        downloadElement.href = href;

        downloadElement.setAttribute("download", filename);

        document.body.appendChild(downloadElement);

        downloadElement.click(); //点击下载   

        document.body.removeChild(downloadElement);//下载完成移除元素   

        window.URL.revokeObjectURL(href); //释放掉blob对象

      });

    },

你可能感兴趣的:(vue.js,elementui,javascript)