关于element-ui 的upload组件 在vue中应用的几点说明（主要说http-request自定义上传过程的参数的使用）_element ui upload http-request 一种是表单参数一种是正常参数

因为upload组件默认用的http的请求，现在需要用websocket去做上传，经过查看element-ui的文档没找到方便的方法，故使用了http-request自定义上传的方式来上传文件

• 几个配置参数的说明

  • action ：上传的url地址，必填项，如果用自定义上传可以随便填个字符串

  • http-request ： 覆盖默认的上传行为，可以自定义上传的实现 ，传入一个函数，函数的参数里包含file对象，filename字段，action字段（就是上面提到的action），以及onProgress,onSuccess,onError三个函数，可以在自定义上传中，在不同时机调用这些函数，会触发upload组件传入的上传钩子函数

  • show-file-list : 是否显示已上传文件列表 ， 默认开启，可设为false关闭

  • auto-upload ： 是否在选取文件后立即进行上传， 默认开启，可设为false关闭

  可参考下面案例

  <template>
    <div>
      <el-upload
        ref="upload"
        v-loading="loading"
        class="avatar-uploader"
        drag
        action="eric"
        :show-file-list="false"
        :on-success="successHandler"
        :before-upload="beforeUploadHandler"
        :on-change="changeHandler"
        :http-request="myUpload"
        :auto-upload="true"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </div>
  </template>
  
  <script>
    import axios from 'axios';
    export default {
      data() {
        return {
          loading: ''
        }
      },
      methods: {
        myUpload(params) {
          console.log(params)
            //构建FormData对象
          let data = new FormData();
          data.append('file',params.file);
        //此处用了axios，也可以用websocket在此处做上传处理    
          axios.post('https://jsonplaceholder.typicode.com/posts/', data)
              .then(res => {
              	console.log(res)
              	//接口成功调用params上的onSuccess函数，会触发默认的successHandler函数
              	//这样可以用自带的ui等
            		params.onSuccess({name: 'eric'})
          	}).catch(err => {
  
          	})
        	},
        beforeUploadHandler(file) {
            //上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，			//则停止上传。一般在此处做文件格式大小的校验等
          console.log(file,'上传前')
        },
        successHandler(res, file, fileList) {
            //文件上传成功时的钩子
          console.log(res, file, fileList)
        },
        changeHandler(file, fileList) {
            //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
          console.log(file, fileList)
        }
      }
    }
  </script>
  
  <style scoped>
  
  </style>
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58
  59
  60
  61
  62
  63
  64
  65
  66
  67

  上例中是选择文件后自动上传，如果要设置手动上传，可设置参数auto-upload=false，然后手动调用this.$refs.upload.submit()，进行上传，手动调用后，会依次触发beforeUploadHandler，myUpload，successHandler等钩子函数