How to use upload component in vue project

This time I will show you how to use the Upload component in the vue project. What are the precautions when using the upload component in the vue project. The following is a practical case. , let’s take a look.

This article introduces an example of using element-ui's Upload upload component 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, upLoadData is the additional parameter to be uploaded when uploading the file, uploadError is the fallback function when uploading the file fails, uploadSuccess is the fallback function when File Upload is successful, and beforeAvatarUpload is when uploading the file. For the function called before, 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
  }
}

I recently used VUE as a front-end framework for my own project. 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. Then I took a look and found that the following processing is required. To use it 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 the address you want. 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-uploadtip"></p>
</el-upload>

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Customized ajax cross-domain component encapsulation

##Express Multer implements the specific steps of node image uploading

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