How to use element-ui's Upload upload component in vue

This article mainly introduces the example of using element-ui's Upload upload component in the vue project. Now I will share it with you and give you a reference.

This article introduces an example of using the Upload upload component of element-ui in the vue project, and shares it with everyone. The details are as follows:

<el-upload
        v-else
        class=&#39;ensure ensureButt&#39;
        :action="importFileUrl"
        :data="upLoadData"
        name="importfile"
        :onError="uploadError"
        :onSuccess="uploadSuccess"
        :beforeUpload="beforeAvatarUpload"
        >
        <el-button size="small" type="primary">确定</el-button>

Among them, importFileUrl is the background interface, and upLoadData is to be uploaded when uploading files. additional parameters, uploadError is the fallback function when the file upload fails, uploadSuccess is the fallback function when the file upload is successful, beforeAvatarUpload is the function called before uploading the file, we can judge the file type here.

data () {
  importFileUrl: 'http:dtc.com/cpy/add',
  upLoadData: {
    cpyId: '123456', 
    occurTime: '2017-08'
  }
},
methods: {
  // 上传成功后的回调
  uploadSuccess (response, file, fileList) {
   console.log('上传文件', response)
  },
  // 上传错误
  uploadError (response, file, fileList) {
   console.log('上传失败，请重试！')
  },
  // 上传前对文件的大小的判断
  beforeAvatarUpload (file) {
   const extension = file.name.split('.')[1] === 'xls'
   const extension2 = file.name.split('.')[1] === 'xlsx'
   const extension3 = file.name.split('.')[1] === 'doc'
   const extension4 = file.name.split('.')[1] === 'docx'
   const isLt2M = file.size / 1024 / 1024 < 10
   if (!extension && !extension2 && !extension3 && !extension4) {
    console.log(&#39;上传模板只能是 xls、xlsx、doc、docx 格式!&#39;)
   }
   if (!isLt2M) {
    console.log(&#39;上传模板大小不能超过 10MB!&#39;)
   }
   return extension || extension2 || extension3 || extension4 && isLt2M
  }
}

Recently I have been using VUE as a front-end framework for my own projects. When I needed to upload files to the server, my colleague told me that the action in upload, that is, the upload address cannot be changed dynamically, and then I checked After a while, the following processing needs to be done before it can be used dynamically:

action is a required parameter, and its type is string. We write action as: action, followed by a method name, call the method, and return you Desired address, code example:

//html 代码
<el-upload :action="UploadUrl()" :on-success="UploadSuccess" :file-list="fileList">
  <el-button size="small" type="primary" >点击上传</el-button>
  <p slot="tip" class="el-upload__tip"></p>
</el-upload>

// js 代码在 methods中写入需要调用的方法
methods:{
  UploadUrl:function(){
    return "返回需要上传的地址";   
  }  
}

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use highCharts to draw 3d pie charts in Vue

How to use ueditor in vue

How to implement a custom control bottom drawer menu using React Native

The above is the detailed content of How to use element-ui's Upload upload component in vue. For more information, please follow other related articles on the PHP Chinese website!