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
        }
      })
    },
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐