美文网首页
Vue element-ui 上传 和 下载

Vue element-ui 上传 和 下载

作者: 顺其自然AAAAA | 来源:发表于2021-07-18 08:57 被阅读0次

    记录一下自己使用element-ui 的 上传组件 的使用,方便以后查阅
    1.在html 使用 el-upload

    <template>
      <div>  
        <el-upload
            class="upload-demo"
            :action="uploadImgUrl"
            :headers="headers"
            :on-success="handleOnSuccess"
            :on-remove="handleRemoveFile"
            accept=".doc, .docx, .xls, .xlsx, .pdf, .jpg, .jpeg, .png"
            multiple
            :limit="9"
            :file-list="addPriceForm.fileList"
            >
             <el-button size="small" type="primary">点击上传</el-button>
         </el-upload>
      </div>
    </template>
    

    参数配置:
    action 必选参数,上传的地址
    headers 设置上传的请求头部 要求是Object
    accept 接受上传的文件类型(thumbnail-mode 模式下此参数无效)
    multiple 是否支持多选文件
    on-success 文件上传成功时的钩子
    on-remove 文件列表移除文件时的钩子
    limit 最大允许上传个数
    file-list 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]

    2.在data() 中的配置

    <script>
    import { getToken, getSid } from "@/utils/auth";
      data () {
          return {
              uploadImgUrl: process.env.NODE_ENV === "production" ? process.env.VUE_APP_BASE_API + `fileapi/upload/uploadDjFileList.do`
              : "http://localhost:8088/upload/uploadDjFileList.do",
              removeImgUrl: process.env.NODE_ENV === "production" ? "fileapi/upload/deleteFile.do"
              : "http://localhost:8088/upload/deleteFile.do",
              headers: {
                uiticket: getToken(),
                sid: getSid() || "",
              },
          }
      }
    </script>
    

    3.在methods 中使用

    <script>
    methods: {
          // 上传文件的回调
        handleOnSuccess(response, file, fileList) {
          for (let i in fileList) {
            if (file.uid === fileList[i].uid) {
              fileList[i].path = response.data.newFilePath;
              fileList[i].wjlj = this.uploadImgUrl + response.data.newFilePath;
              fileList[i].zlmc = fileList[i].name;
              break;
            }
          }
          this.addPriceForm.fileList = fileList;
        },
    
        // 封装文件删除接口
        removeFile(path, index, fn) {
          console.log(path, "删除文件path路径");
          request({
            url: this.removeImgUrl,
            method: "get",
            params: {
              path: "D:\\file\\gcf\\dj" + path,
            },
          })
            .then(() => {
              console.log(index, "index");
              if (typeof fn === "function") {
                fn(index);
              }
            })
            .catch((e) => {
              console.log("错误:" + e);
            })
            .finally();
        },
        // 删除文件
        handleRemoveFile(file) {
          let path = "";
          let index = -1;
          for (let i in this.addPriceForm.fileList) {
            if (file.uid === this.addPriceForm.fileList[i].uid) {
              path = this.addPriceForm.fileList[i].path;
              index = parseInt(i);
            }
          }
          this.removeFile(path, index, this.resetzrSjzlWwDtos);
        },
        // 封装删除本地显示文件
        resetzrSjzlWwDtos(index) {
          const arr = this.addPriceForm.fileList;
          arr.splice(index, 1);
          this.$set(this.addPriceForm, "fileList", arr);
        },
    }
    </script>
    

    上传操作大概就是这些吧

    下面写一下自己项目的下载,可能每个人使用的不一样吧

    如果没什么其他要求,其实可以使用:window.open(url)

    window.open('http://localhost:8002/xxxxxxxxxxx')
    // 反正给一个Url的http路径就行了
    
    // 父组件
    <el-table-column
              property="filepath"
              label="查看文件"
              tag="查看文件"
              align="center"
              width="150"
            >
              <template slot-scope="scope">
                <el-button type="text" @click="handlePicture(scope.row)"
                  >查看</el-button
                >
              </template>
    </el-table-column>
    <!-- 文件列表显示弹出框开始 -->
        <el-dialog title="查看文件" :visible.sync="isShowFile">
        // sjzl 就是当前行的数据,传给子组件
          <Sjzl-tab :sjzl="sjzl" />
        </el-dialog>
        <!-- 文件列表显示弹出框结束 -->
    
        handlePicture(row) {
          // 拿到当前行的所有数据
          this.sjzl = row;
          this.isShowFile = true;
        },
    
    // 子组件
    // 这里是点击下载的时候拿到当前行的数据传过去
    <el-button v-if="scope.row.bdlj && !isImage(scope.row.bdlj)" type="text" 
    @click="showReadFile(scope.row.bdlj, 'file', 1, scope.row)">下载附件</el-button>
    

    子组件拿到数据并且监听,处理数据

      watch:{
        sjzl: {
          handler: function (sjzl) {
            if (sjzl) {
              this.ywslid = sjzl.id
              const filearr2 = []
              this.imgList = []
              // 判断是否有文件或者图片
              if (sjzl.filepathList && sjzl.filepathList instanceof Array) {
                for(let i = 0; i < sjzl.filepathList.length; i++) {
                  const arr = sjzl.filepathList[i].split('\\')
                  const arr4 = sjzl.fileNameList[i].split('.')
                  const arr2 = arr[arr.length - 1].split('.')
                  const name = arr2[0]
                  const fileName = arr4[0]
                  const type = getFileType2(arr2[arr2.length - 1])
                  this.imgList.push({
                    url: this.actionUrl + sjzl.filepathList[i],
                    name: name,
                    type: type,
                    fileName: fileName
                  })
                  filearr2.push({
                    bdlj: this.actionUrl + sjzl.filepathList[i],
                    zlmc: name,
                    type: type,
                    fileName: fileName
                  })
                }
              }
            // filesData 是 table 表格的数据
              this.filesData = filearr2
              this.fileTotalNumber = sjzl.totalCount
            }
          },
          deep: true,
          immediate: true
        }
      },
    

    子组件就是类似这种效果


    微信图片_20210721232226.png
        // 点击查看附件和下载附件  filetype = 0 是查看, filetype = 1 是下载
        showReadFile (url, type, filetype, row) {
          // url = url.split('dj')[1]
          url = url
          let fileName = row.fileName + '.' + row.type
          if (filetype === 1) {
            // this.loading = true
            // window.open(url)
            downloadPdf2(url, fileName).catch(e => {
              this.$message.error('获取PDF数据失败,请联系管理员')
              console.log('获取PDF数据失败:' + e)
            }).finally(() => {
              this.loading = false
            })
          } else {
            this.fileObj = {
              url: url,
              type: type,
              name: name,
              isShowDialog: true,
              fileList: this.imgList
            }
          }
          
        },
    
    /**
     * 获取ArrayBuffer格式的二进制数据
     * @param {*} url
     * @returns
     */
     export function getArrayBufferFile2 (url) {
      return service({
        method: 'get',
        // url: window.location.protocol + '//' + window.location.host + url ,
        url: url ,
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          'uiticket': uiticket , // 必须添加的请求头
          'sid': sid  // 必须添加的请求头
        },
        responseType: 'arraybuffer', // 关键 设置 响应类型为二进制流
      })
    }
    
    /**
     * 获取Blob格式的二进制数据
     * @param {*} url
     * @returns
     */
     export function getBlobFile2 (url) {
      return service({
        method: 'get',
        // url: window.location.protocol + '//' + window.location.host + url ,
        url: url ,
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          'uiticket': uiticket , // 必须添加的请求头
          'sid': sid  // 必须添加的请求头
        },
        responseType: 'blob', // 关键 设置 响应类型为二进制流
      })
    }
    
    
    /**
     * 下载
     * @param {*} url
     * @param {*} name
     */
     export function downloadPdf2 (url, name) {
      return getBlobFile2(url).then(response => {  // 将后台的图片二进制流转化为base64
        const blob = new Blob([response.data], { type: 'application/*' })//这里type指定下载文件的类型
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, name)
        } else {
          pubDownloadFn(blob, name)
        }
      })
    }
    
    function pubDownloadFn (blob, name) {
      console.log(name,'999')
      let downloadElement = document.createElement('a')//创建<a>标签
      let href = window.URL.createObjectURL(blob) // 创建下载的链接
      downloadElement.href = href
      downloadElement.download = name // 下载后文件名
      document.body.appendChild(downloadElement)
      downloadElement.click() // 点击下载
      document.body.removeChild(downloadElement) // 下载完成移除元素
      window.URL.revokeObjectURL(href) // 释放掉blob对象
    }
    

    相关文章

      网友评论

          本文标题:Vue element-ui 上传 和 下载

          本文链接:https://www.haomeiwen.com/subject/ajmopltx.html