探索Vue.js中的文件夹上传解决方案:vue-simple-uploader
<template>
<div id="app">
<file-upload
ref="upload"
v-bind:post-action="postAction"
v-bind:put-action="putAction"
v-bind:headers="headers"
></file-upload>
<button v-on:click="submitFiles">上传</button>
</div>
</template>
<script>
import FileUpload from './components/FileUpload.vue'
export default {
name: 'app',
components: {
FileUpload
},
data() {
return {
postAction: '/upload/endpoint', // 上传文件的API端点
putAction: '/upload/endpoint', // 如果需要断点续传,这里是更新已上传文件状态的API端点
headers: { // 可以添加额外的请求头
Authorization: 'Bearer ' + localStorage.getItem('token')
}
}
},
methods: {
submitFiles() {
this.$refs.upload.submit();
}
}
}
</script>
这个代码实例展示了如何在Vue应用中使用vue-simple-uploader
组件来上传文件。它定义了一个FileUpload
组件,并通过ref
属性为其设置了一个引用,以便在父组件中触发文件上传。同时,它展示了如何绑定上传动作postAction
和putAction
,以及如何添加请求头headers
。最后,它提供了一个按钮,当点击时,会触发文件上传。
评论已关闭