关于Avue的一些坑(慢慢更新

zongzi_494

已于 2023-01-12 09:45:07 修改

阅读量823

点赞数 2

文章标签： vue.js javascript 前端

于 2022-11-16 17:24:35 首次发布

本文链接：https://blog.csdn.net/zongzi494/article/details/125695836

版权

1.图片上传回调

       {
            type: "upload",
            label: "排水证图片",
            prop: "drainWaterCardImage",
            span: 24,
            limit: 2,
            action: "/api/siping-resource/oss/endpoint/put-file-attach",
            listType: "picture-card",
            limit无效的时候picture-img 就改为card
            showFileList: true,
            dataType: "string",
            accept: "image/*",
            tip: "只能上传JPG、jpeg、PNG文件",
            loadText: "图片上传中，请稍等",
            hide: true,
            propsHttp: {
                res: "data",
                url: "link",
            },
        },

		vue文件
       <avue-crud ref="crud"
               v-model="form"
               :option="tableInfo.option"
               :data="tableInfo.data"
               :page.sync="tableInfo.page"
               :search.sync="tableInfo.query"
               :table-loading="tableInfo.loading"
               :before-open="beforeOpen"
               :defaults.sync="tableInfo.defaults"
               @row-del="rowDel"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @search-change="searchChange"
               @search-reset="searchReset"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="onLoad"
               @on-load="onLoad"
               :upload-after="uploadAfter">


这个是上传upload的回调方法 上传文件或者图片都可以在这里进行res的处理
 uploadAfter (res, done, loading, column) {

      console.log(this.form);

      console.log(res);
      this.form.drainWaterCardImage = res.name
      console.log(this.form);

      console.log(column);
      // this.excelBox = false;
      // this.refreshChange();
      done();
    },

2.文件上传（xls,pdf,word之类）回显下载

avue-crud增加方法
beforeOpen处理一下获得的数据
属性配置页面不要加string之类的参数配置name为文件名字

:upload-preview="uploadPreview"

methods:{
    uploadPreview(file, column, done) {
      console.log(file);
      this.download(file.url, file.name);
    },
    download(url, fileName) {
      var xhr = new XMLHttpRequest();
      xhr.open("GET", url, true);
      xhr.responseType = "blob";
      xhr.onload = function () {
        if (this.status === 200) {
          var blob = new Blob([this.response]);
          var blobUrl = window.URL.createObjectURL(blob);
          var a = document.createElement("a");
          a.href = blobUrl;
          a.download = fileName;
          a.click();
          window.URL.revokeObjectURL(blobUrl);
        }
      };
      xhr.send();
    },
   },
   
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        infoDetail(this.form.id).then((res) => {
          if (res.data.code === 200) {
   
            this.form = res.data.data;
            if (this.form.fileUrl && this.form.fileUrl != "") {
              this.form.attachFileInfoListUrl = [
                {
                  label:
                    this.form.fileName && this.form.fileUrl
                      ? this.form.fileName
                      : "文件",
                  value: this.form.fileUrl,
                },
              ];
            }
          }
        });
      }
      done();
    },
		
		属性配置页面 
  {
        type: "upload",
        label: "上传附件",
        prop: "attachFileInfoList",
        span: 24,
        labelWidth: 100,
        loadText: "文件上传中，请稍等",
        accept: ".xls,.xlsx,.txt,.doc,.docx,.pdf",
        propsHttp: {
          res: "data",
          attachId: "attachId",
          fileExtension: "name",
          fileSize: "fileSize",
          url: "link",
          name: "originalName",
        },
        action: "/api/newwater-resource/oss/endpoint/put-file-attach",
        row: true,
        hide: true,
      },