一、添加依賴
在使用Vue前端實現文件上傳前,我們需要添加一個Vue文件上傳組件,這裡我們使用的是vue-upload-component。我們可以通過命令行在項目目錄下使用npm下載這個組件:
npm install vue-upload-component --save
二、引入Vue文件上傳組件
我們需要在Vue組件中引入vue-upload-component,然後在template中使用它。這裡我們將它添加到一個單獨的文件中:
//引入vue-upload-component
import { UploadComponent } from 'vue-upload-component'
export default {
components: {
'file-upload': UploadComponent
},
data () {
return {
files: []
}
},
methods: {
uploadStarted (file) {
console.log(file)
},
fileUploaded (response) {
console.log(response)
},
uploadAborted (file) {
console.log(file)
},
uploadProgress (event) {
console.log(event)
}
}
}
然後在template中使用:
原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-hant/n/270351.html
微信掃一掃
支付寶掃一掃