el-upload组件自定义上传

最近在使用element-ui框架，但是遇到后端同学要求附带参数需要随着文件的变化而变化，然后用el-upload在before-upload钩子里面进行判断更新，但是实际使用的效果不太理想，附带参数总是慢半拍，并不能实时更新，在网上查找之后发现了大家都在使用http-request方法进行自定义上传，这也是element-ui提供的一个方法。下面为大家提供一个小demo方便大家使用。

  
  <template>
    <el-upload
      class="upload-demo"
      ref="upload"
      action="https://jsonplaceholder.typicode.com/posts/"
      :http-request="myUpload"
      :on-success="handleSuccess"
      :on-error="handleError"
      :with-credentials="true">
      <el-button slot="trigger" size="small" type="primary" icon="el-icon-document">选取文件</el-button>
      <div slot="tip" class="el-upload__tip">只能上传<b>apk</b>文件，且文件以“<b>版本号_76</b>”命名<br/>若目标文件已上传过，则此环节可略去</div>
    </el-upload>
</template>
  

<script>
  export default {
    data() {
      return {
        action:"https://jsonplaceholder.typicode.com/posts/",
        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
      };
    },
    methods: {
    //myupload是自定义的上传方法
  //content.onError及content.onSuccess是ele提供的回调函数  如果删掉这些 将会导致在on-success和onError中不能拿到正确的数据
      myUpload(content) {
        console.log(content)
          var form = new FormData();
          form.append("file", content.file);
          console.log(form)
          this.$axios.post(content.action, form).then(res=>{
              if(res.data.code != 0) {
                  content.onError('文件上传失败, code:' + res.data.code)
              } else {
                console.log(res.data)
                  content.onSuccess('文件上传成功！')
              }
          }).catch(error=>{
                if (error.response) {
                      content.onError('文件上传失败,' + error.response.data);
                  } else if(error.request) {
                      content.onError('文件上传失败，服务器端无响应')
                  } else {
                      content.onError('文件上传失败，请求封装失败')
                  }
          });
      },
handleError(response, file, fileList) {
      this.$message.error("上传文件失败");
    },
   handleSuccess(response, file) {
      if(response.code == this.ERRORCODE.SUCCESS){
        this.form.file_path = response.file_path
        this.isPass = true
        this.file_msg = file
        this.$message.success("上传文件成功")
      }else{
        this.$message.success("上传文件失败")
      }
    },

</script>