avue之文件上传

网上关于文件上传稍微复杂一点的技术都没有,完全自己踩坑

关于文件1 : 上传文件时配合element的上传指定的文件,在avue里面的crud里面指定方法,upload-before
在上传之前会调用uploadBefore方法,然后回去file做相关操作,done()是继续操作,就是直接走上传文件
loading() 就是停留当前界面,不动

     <avue-crud
        ref="crud"
        :page.sync="page"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOption"
        :permission="permissionList"
        :upload-before="uploadBefore"
        @on-load="getList"
        @search-change="searchChange"
        @refresh-change="refreshChange"
        @size-change="sizeChange"
        @current-change="currentChange"
        @row-update="handleUpdate"
        @row-save="handleSave"
        @row-del="handleDel"

        @search-reset="searchreset"
      />

在我的这个方法里面,只可以是jpeg,jpg,png,如果可以就走后面的保存文件

    uploadBefore(file,done,loading) {
        console.log(file.type)
        if(file.type=="image/jpeg"||file.type=="image/jpg"||file.type=="image/png")
        {
          done()
        }
        else
        {
                  this.$message.warning('请选择指定格式的文件')
                    loading()
        }
      }

在附上我的js上传文件的column,如果需要可以在里面加headers(如果后端需要请求头)

   {
        type: 'upload',
        alone: true,
        labelWidth: 100,
        label: '课程照片',
        listType: 'picture-card',
        prop: 'oneImg',
        dataType: 'string',
        headers:"****"
        loadText: '附件上传中，请稍等',
        propsHttp: {
          res: 'data',
        },
        rules: [
        //   required: true,
        //   message: "请选择课程照片",
        //   trigger: "change",
        // },
        {
          required: true,
        validator: checkImg,
        trigger: "blur",
      },

    ],
        tip: '只能上传jpg/png/jpeg文件',
        action: "******"

      },

我这个是element和avue,有相关问题可以在下提问