在vue專案中如何使用上傳元件

這次帶給大家在vue專案中怎樣使用上傳元件，在vue專案中使用上傳元件的注意事項有哪些，以下就是實戰案例，一起來看一下。

本文介紹了vue專案中使用element-ui的Upload上傳元件的範例，分享給大家，具體如下：

<el-upload>
        <el-button>确定</el-button></el-upload>

其中importFileUrl是後台接口，upLoadData是上傳檔案時要上傳的額外參數，uploadError是上傳檔案失敗時的回掉函數，uploadSuccess是檔案上傳成功時的回掉函數，beforeAvatarUpload是在上傳檔案之前呼叫的函數，我們可以在這裡進行文件類型的判斷。

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 <p style="text-align: left;">
最近在適用VUE作為前端框架做自己的項目，在做到需要上傳文件到伺服器時，同事告訴我upload之中的action也就是上傳地址不能動態的去更改，然後去看了一下，需要做以下處理才能動態的使用：</p><p style="text-align: left;">
action是一個必填參數，且其類型為<a href="http://www.php.cn/wiki/57.html" target="_blank">string</a>，我們把action寫成:action，然後後面跟著一個方法名，呼叫方法，回傳你想要的位址，程式碼範例：</p><pre class="brush:php;toolbar:false">//html 代码
<el-upload>
  <el-button>点击上传</el-button>
  <p></p>
</el-upload>

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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

自訂ajax的跨網域元件封裝

express multer實作node圖片上傳的具體步奏

以上是在vue專案中如何使用上傳元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！