移动端vue项目的图片上传插件

vue

有一移动端项目,使用的vant-ui。可是vant自带的Uploader似乎不支持一次选择多张图片上传的功能。

于是乎:在https://www.npmjs.com/查找发现找到 vue-upload-component 组件,功能基本都有,评价也不错,目前有1500多个star。

因为是国人开发的,所有比较完善的中文文档。

完整的例子。

使用:

1.安装:

npm install vue-upload-component --save


2.在main.js中全局引入

const VueUploadComponent = require(\'vue-upload-component\')

Vue.component(\'file-upload\', VueUploadComponent)

3.测试例子:test.vue

<!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"

>

上传文件

</file-upload>

<button v-show="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true" type="button">开始上传</button>

<button v-show="$refs.upload && $refs.upload.active" @click.prevent="$refs.upload.active = false" type="button">停止上传</button>

</div>

<script>

new Vue({

el: \'#app\',

data: function () {

return {

files: []

}

},

components: {

FileUpload: VueUploadComponent

},

methods: {

/**

* Has changed

* @param Object|undefined newFile 只读

* @param Object|undefined oldFile 只读

* @return undefined

*/

inputFile: function (newFile, oldFile) {

if (newFile && oldFile && !newFile.active && oldFile.active) {

// 获得相应数据

console.log(\'response\', newFile.response)

if (newFile.xhr) {

// 获得响应状态码

console.log(\'status\', newFile.xhr.status)

}

}

},

/**

* Pretreatment

* @param Object|undefined newFile 读写

* @param Object|undefined oldFile 只读

* @param Function prevent 阻止回调

* @return undefined

*/

inputFilter: function (newFile, oldFile, prevent) {

if (newFile && !oldFile) {

// 过滤不是图片后缀的文件

if (!/\.(jpeg|jpe|jpg|gif|png|webp)$/i.test(newFile.name)) {

return prevent()

}

}

// 创建 blob 字段 用于图片预览

newFile.blob = \'\'

let URL = window.URL || window.webkitURL

if (URL && URL.createObjectURL) {

newFile.blob = URL.createObjectURL(newFile.file)

}

}

}

});

</script>

</body>

</html>

说明:如果不想用提供的post-action或put-action方法,可以使用自定义的上传方法custom-action

custom-action方法 优先级高于 put-action, post-action

以上是 移动端vue项目的图片上传插件 的全部内容, 来源链接: utcz.com/z/375099.html

回到顶部