vue文件上传

vue上传文件的思路:
上传文件是调用上传文件接口,上传成功后返回文件id,在提交表单时文件id和表单绑定。
原因:上传大文件时,提交表单不用等待,

<div>
          <el-divider content-position="left">附件上传</el-divider>
          <el-upload
            class="upload-demo"
            ref="upload"
            action="#"
            :http-request="uploadSectionFile"
            :on-preview="handlePreview"
            :before-upload="beforeUpload"
            multiple
            :on-exceed="handleExceed"
            :show-file-list="false"
          >
            <el-button :loading="loading" size="small" type="primary">点击上传</el-button>
          </el-upload>
          <div style=" margin:15px 0px;border-top: 1px solid #EBEEF5;border-left: 1px solid #EBEEF5;border-right: 1px solid #EBEEF5;">
            <el-table
              ref="multipleTable"
              :data="newAttachmentsTable"
              tooltip-effect="dark"
              style="width: 100%;"
            >
              <el-table-column
                headerAlign="center"
                align="left"
                prop="name"
                label="文件名">
              </el-table-column>
              <el-table-column
                headerAlign="center"
                align="center"
                prop="size"
                label="大小"
                width="120">
                <template slot-scope="scope">
                  <span v-if="scope.row.size/1024 < 1024">
                    {{ (scope.row.fileSize/1024).toFixed(1) }}KB
                  </span>
                  <span v-else-if="scope.row.size/1024 > 1024">
                    {{ ((scope.row.fileSize/1024)/1024).toFixed(1) }}MB
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                headerAlign="center"
                align="center"
                prop="creatorName"
                label="上传人"
                width="120">
              </el-table-column>
              <el-table-column
                headerAlign="center"
                align="center"
                prop="createTime"
                label="上传时间"
                width="120">
                <template slot-scope="scope">{{ scope.row.createTime.slice(0,10) }}</template>
              </el-table-column>
              <el-table-column
                label="操作"
                headerAlign="center"
                align="center"
                width="200">
                <template slot-scope="scope">
                  <el-button @click.native.prevent="deleteRow(scope.$index,attachmentsTable)" type="text" size="small" style="color:red;">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div slot="tip" class="el-upload__tip">只能上传xls/xlsx/ppt/pptx/docx/doc/pdf/jepg/jpg/bmp/gif/png/zip/txt文件,且不超过20M</div>
        </div>
// data上传附件
        loading:false,
        date: new Date(),
        files:[],
        newAttachmentsTable:[],
        insert:true,
        noPersonalInformation:[]
// 上传附件开始
    uploadSectionFile(param) {
      //创建临时的路径
      this.loading = true
      var windowURL = window.URL || window.webkitURL;
      var filesArray = []
      this.imgUrl = windowURL.createObjectURL(param.file);
      let file = param.file
      filesArray.push(file)
      var formdata=new FormData();
      filesArray.forEach(function (file) {
        formdata.append('files',file);
      })
      const token = "tokenurl"
      const url1 = "ajaxurl?token=" + token
      axios({
        url: url1,
        method: 'post',
        data: formdata,
        headers:{
          // 'Content-Type':'multipart/form-data',
          'Content-Type':'multipart/form-data;boundary = ' + new Date().getTime(),
          token: sessionStorage.getItem("token")
        }
      }).then(res=>{
        try {
          if(res.data.code == 200){
            this.loading = false
            res.data.data.forEach(value=>{
              this.newAttachmentsTable.push(value)
            })
            this.newAttachmentsTable.forEach(value => {
              var userInfo = JSON.parse(decodeURIComponent(sessionStorage.userInfo))
              value.creatorName = userInfo.displayName
              value.createTime = this.dateFormat('YYYY-mm-dd HH:MM:SS', this.date)
            });
          }
        } catch (e) {
          this.$message(e)
        }
      })
    },
    // 上传附件删除
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
    },
    // 上传限制
    beforeUpload(file){
      var testmsg = file.name.substring(file.name.lastIndexOf('.')+1)
      const extension = testmsg === 'xls'
      const extension2 = testmsg === 'xlsx'
      const extension3 = testmsg === 'ppt'
      const extension4 = testmsg === 'pptx'
      const extension5 = testmsg === 'docx'
      const extension6 = testmsg === 'doc'
      const extension7 = testmsg === 'pdf'
      const extension8 = testmsg === 'jpeg'
      const extension9 = testmsg === 'jpg'
      const extension10 = testmsg === 'bmp'
      const extension11 = testmsg === 'gif'
      const extension12 = testmsg === 'png'
      const extension13 = testmsg === 'zip'
      const extension14 = testmsg === 'txt'
      const isLt2M = file.size / 1024 / 1024 < 20
      if(!extension && !extension2 && !extension3 && !extension4 && !extension5 && !extension6 && !extension7 && !extension8 && !extension9 && !extension10 && !extension11 && !extension12 && !extension13 && !extension14) {
        this.$message({
          message: '上传文件只能是xls/xlsx/ppt/pptx/docx/doc/pdf/jpeg/jpg/bmp/gif/png/zip/txt格式!',
          type: 'warning'
        });
      }
      if(!isLt2M) {
        this.$message({
          message: '上传文件大小不能超过 20MB!',
          type: 'warning'
        });
      }
      return extension && isLt2M || extension2 && isLt2M || extension3 && isLt2M || extension4 && isLt2M || extension5 && isLt2M || extension6 && isLt2M || extension7 && isLt2M || extension8 && isLt2M || extension9 && isLt2M || extension10 && isLt2M || extension11 && isLt2M || extension12 && isLt2M || extension13 && isLt2M || extension14 && isLt2M
    },
    // 删除
    deleteRow(index, rows) {
      this.$nextTick(()=>{
        this.newAttachmentsTable.splice(index, 1);
      })
    },
    enclosureFun(id){
      this.$axios.post("ajaxurl",{
        id:id
      }).then((res) => {
        this.attachmentsTable = res.data.attachments
        if( this.attachmentsTable == null){
          this.downloadsShow = false
        }else{
          this.downloadsShow = true
        }
      })
    },
  • 7
    点赞
  • 41
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用Vue组件来实现上传和查看PDF文件的功能。您可以使用引用中提到的"vue-pdf"组件来实现。这个组件虽然不支持PDF文字复制和打印时可能出现乱码的问题,但已经足够满足您的需求了。 首先,您需要在Vue项目中安装"vue-pdf"组件。您可以通过以下命令使用npm来安装该组件: ``` npm install vue-pdf ``` 安装完成后,您需要在您的Vue组件中引入和使用"vue-pdf"组件。您可以参考中的文档来了解如何使用该组件。 在实现文件上传的功能时,您可以使用Vue提供的文件上传组件,例如"vue-file-upload"组件。您可以在该组件中设置允许上传PDF文件,并在上传成功后,将文件路径保存到Vue的数据中。 当用户想要查看上传的PDF文件时,您可以使用"vue-pdf"组件来显示该文件。您需要将上传的PDF文件路径传递给"vue-pdf"组件的"src"属性,以便加载并显示该PDF文件。 总结起来,您可以按照以下步骤来实现Vue文件上传和查看PDF的功能: 1. 安装"vue-pdf"组件:运行命令`npm install vue-pdf` 2. 引入"vue-pdf"组件:在您的Vue组件中引入"vue-pdf"组件 3. 设置文件上传功能:使用Vue文件上传组件,设置允许上传PDF文件,并将文件路径保存到Vue的数据中 4. 显示PDF文件:使用"vue-pdf"组件,将上传的PDF文件路径传递给"src"属性,以便加载和显示该文件 希望以上信息对您有所帮助!<span class="em">1</span><span class="em">2</span><span class="em">3</span>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值