vue-upload-component | 一款基于vuejs的强大的文件上传组件
源码介绍
vue upload component是一款基于vuejs的强大的文件上传组件。它支持常规的文件上传，以及多文件上传，文件目录上传，支持缩略图预览，支持拖拽上传等，功能十分强大。 vue upload component文件上传组件支持vue2.x和vue3.x。它的特点有： 如果您想使用vue upload component文件上传组件，首先您需要安装它，命令如下： 一个简单的示例： 详细的使用方法和配置参数请参考：vue upload component官网简要教程
使用方法
安装
// vue2.x
npm install vue-upload-component --save
// vue3.x
npm install vue-upload-component@next --save
使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue-upload-component Test</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-upload-component"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="file in files">{{file.name}} - Error: {{file.error}}, Success: {{file.success}}</li>
</ul>
<file-upload
ref="upload"
v-model="files"
post-action="/post.method"
put-action="/put.method"
@input-file="inputFile"
@input-filter="inputFilter"
>
Upload file
</file-upload>
<button v-show="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true" type="button">Start upload</button>
<button v-show="$refs.upload && $refs.upload.active" @click.prevent="$refs.upload.active = false" type="button">Stop upload</button>
</div>
<script>
new Vue({
el: '#app',
data: function () {
return {
files: []
}
},
components: {
FileUpload: VueUploadComponent
},
methods: {
/**
* Has changed
* @param Object|undefined newFile Read only
* @param Object|undefined oldFile Read only
* @return undefined
*/
inputFile: function (newFile, oldFile) {
if (newFile && oldFile && !newFile.active && oldFile.active) {
// Get response data
console.log('response', newFile.response)
if (newFile.xhr) {
// Get the response status code
console.log('status', newFile.xhr.status)
}
}
},
/**
* Pretreatment
* @param Object|undefined newFile Read and write
* @param Object|undefined oldFile Read only
* @param Function prevent Prevent changing
* @return undefined
*/
inputFilter: function (newFile, oldFile, prevent) {
if (newFile && !oldFile) {
// Filter non-image file
if (!/\.(jpeg|jpe|jpg|gif|png|webp)$/i.test(newFile.name)) {
return prevent()
}
}
// Create a blob field
newFile.blob = ''
let URL = window.URL || window.webkitURL
if (URL && URL.createObjectURL) {
newFile.blob = URL.createObjectURL(newFile.file)
}
}
}
});
</script>
</body>
</html>
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » vue-upload-component | 一款基于vuejs的强大的文件上传组件
发表评论 取消回复