首頁 > 文章 > web前端 > vue中如何使用element-ui的Upload上傳元件

vue中如何使用element-ui的Upload上傳元件

亚连原創: 2018-06-07 10:50:284077瀏覽

本篇文章主要介紹了在vue專案中使用element-ui的Upload上傳元件的範例，現在分享給大家，也給大家做個參考。

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

<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>

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

data () {
  importFileUrl: &#39;http:dtc.com/cpy/add&#39;,
  upLoadData: {
    cpyId: &#39;123456&#39;, 
    occurTime: &#39;2017-08&#39;
  }
},
methods: {
  // 上传成功后的回调
  uploadSuccess (response, file, fileList) {
   console.log(&#39;上传文件&#39;, response)
  },
  // 上传错误
  uploadError (response, file, fileList) {
   console.log(&#39;上传失败，请重试！&#39;)
  },
  // 上传前对文件的大小的判断
  beforeAvatarUpload (file) {
   const extension = file.name.split(&#39;.&#39;)[1] === &#39;xls&#39;
   const extension2 = file.name.split(&#39;.&#39;)[1] === &#39;xlsx&#39;
   const extension3 = file.name.split(&#39;.&#39;)[1] === &#39;doc&#39;
   const extension4 = file.name.split(&#39;.&#39;)[1] === &#39;docx&#39;
   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
  }
}

最近在適用VUE作為前端框架做自己的項目，在做到需要上傳文件到伺服器時，同事告訴我upload之中的action也就是上傳地址不能動態的去更改，然後去看了一下，需要做以下處理才能動態的使用：

action是一個必填參數，且其類型為string，我們把action寫成:action，然後後面跟著一個方法名，呼叫方法，返回你想要的地址，程式碼範例：

//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 "返回需要上传的地址";   
  }  
}

上面是我整理給大家的，希望今後對大家有幫助。

在Vue中如何使用highCharts繪製3d餅圖

在vue中如何使用ueditor

#使用React Native如何實作自訂控制項底部抽屜選單

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

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：vue子父元件互相傳遞資料（附程式碼）下一篇：vue子父元件互相傳遞資料（附程式碼）

看更多