這次帶給大家在vue專案中怎樣使用上傳元件，在vue專案中使用上傳元件的注意事項有哪些，以下就是實戰案例，一起來看一下。
本文介紹了vue專案中使用element-ui的Upload上傳元件的範例，分享給大家，具體如下：
<el-upload
v-else
class='ensure ensureButt'
: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: '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('上传模板只能是 xls、xlsx、doc、docx 格式!')
}
if (!isLt2M) {
console.log('上传模板大小不能超过 10MB!')
}
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-uploadtip"></p> </el-upload>
// js 代码在 methods中写入需要调用的方法
methods:{
UploadUrl:function(){
return "返回需要上传的地址";
}
}相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是在vue專案中如何使用上傳元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
