npm vue upload是一款基于Vue.js框架的上傳插件,可以輕松地完成文件上傳功能。
使用npm vue upload,我們可以在Vue.js項目中方便地實現(xiàn)文件上傳功能,無需自己編寫上傳組件或使用第三方上傳組件。下面是一個簡單的文件上傳示例:
<template>
<div>
<input type="file" @change="uploadFile" />
</div>
</template>
<script>
import NpmVueUpload from 'npm-vue-upload';
export default {
name: 'Upload',
data() {
return {
uploadUrl: 'http://localhost:3000/upload'
}
},
components: {
NpmVueUpload
},
methods: {
uploadFile(event) {
const files = event.target.files;
const formData = new FormData();
formData.append('file', files[0]);
axios.post(this.uploadUrl, formData).then(res =>{
console.log(res.data);
})
}
}
}
</script>
在上面的代碼中,我們首先引入了npm-vue-upload插件,并將其注冊為Vue組件。接著,在uploadFile方法中,我們通過FormData構(gòu)造函數(shù)創(chuàng)建一個FormData對象,并將選中的文件添加到其中。最后,我們通過axios庫發(fā)送POST請求,將文件上傳至指定的服務(wù)器。