- Notifications
You must be signed in to change notification settings - Fork41
a mobile vue component implementation for weui uploader
License
NotificationsYou must be signed in to change notification settings
eJayYoung/vux-uploader-component
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
a mobile vue component implementation forweui uploader
npm install -S vux-uploader-component
https://ejayyoung.github.io/vux-uploader-component/index.html
scan the qrcode and have a test in your device
<template><uploaderv-model="fileList":url="remoteUrl"@on-change="onChange"@on-cancel="onCancel"@on-success="onSuccess"@on-error="onError"@on-delete="onDelete"></uploader></template><script>importUploaderfrom"vux-uploader-component";exportdefault{components:{ Uploader},data(){return{fileList:[]};}};</script>
<uploaderv-model="fileList":url="remoteUrl"name="upload"></uploader>
<uploaderv-model="fileList":url="remoteUrl":params="{ token: '13579', linkid: '2323', modelname: 'modelname' }"></uploader>
<template><uploaderv-model="fileList":autoUpload="false"></uploader></template><script>importUploaderfrom"vux-uploader-component";exportdefault{components:{ Uploader},data(){return{fileList:[]};},methods:{submit(){constformData=newFormData();formData.append("file",fileList[0].blob);fetch.post(url,formData).then(()=>{}).catch(()=>{});}}};</script>
| property | type | default | description |
|---|---|---|---|
| title | String | '图片上传' | 组件标题 |
| files | Array | [] | 初始化数据源，通过on-fileList-change事件绑定 v-model |
| limit | Number | String | 5 | 限制上传图片个数 |
| limitPrompt | Function | (limit) => `不能上传超过${limit}张图片` | 限制上传alert的提示语 |
| capture | Number | String | false | 是否只选择调用相机 |
| enableCompress | Boolean | true | 是否压缩 |
| maxWidth | String | Number | 1024 | 图片压缩最大宽度 |
| quality | String | Number | 0.92 | 图片压缩率 |
| url | String | - | 上传服务器 url |
| headers | Object | {} | 上传文件时自定义请求头 |
| withCredentials | Boolean | - | 设置为true的话，支持标准CORS设置cookie值 |
| params | Object | - | 上传文件时自定义参数 |
| name | String | 'file' | 上传文件时 FormData 的 Key，默认为 file |
| autoUpload | Boolean | true | 是否自动开启上传 |
| multiple | String | Boolean | "" | 是否支持多选,false为不支持 |
| readonly | Boolean | false | 只读模式（隐藏添加和删除按钮） |
| event | param | description |
|---|---|---|
| on-change | (FileItem, FileList) | 选完照片，删除照片时，FileList 变化时触发，返回当前改变的 FileItem，以及当前的 FileList |
| on-cancel | () | 选择照片后取消的回调，用于错误提示 |
| on-success | (result, fileItem) | 上传请求成功后的回调，返回远程请求的返回结果，及当前添加文件的 FileItem |
| on-error | (xhr) | 上传请求失败后的回调，返回xhr |
| on-delete | (cb) | 删除照片时的回调,返回隐藏 Previewer，删除图片的回调，没监听onDelete事件的时候，直接执行删除回调 |
通过 v-model 可以在组件外部获取更新的组件的FileList
目前将 File 对象的属性复制组成 FileItem, FileItem 组成 FileList，便于用户获取 File 对象的信息
{"blob":Blob,"fetchStatus":"success","lastModified":1552382376925,"lastModifiedDate":"Tue Mar 12 2019 17:19:36 GMT+0800 (中国标准时间)","name":"YourImage.jpeg","progress":100,"size":68905,"type":"image/jpeg","url":"blob:http://0.0.0.0:8080/e3a87d67-a1dc-4909-b5fa-7bb3a7baad11"}- 调用手机相机
- 获取图片并渲染到浏览器
- 解决图片 EXIF 旋转
- 预览图片
- 删除图片
- 支持上传图片配置
- 显示上传进度
- 支持多选
- 支持 v-model 获取 FileList
- 接入Photoswipe，增强预览功能
- xhr支持自定义头部和withCredentials
- 自定义限制alert的提示语内容
- 改为vue-cli 3.0 打包
# install dependenciesnpm install# serve with hot reload at http://0.0.0.0:8080/npm run dev# build for production with minificationnpm run build:prod# publish packagenpm version patchnpm publish
For detailed explanation on how things work, consult thedocs for vue-loader.
About
a mobile vue component implementation for weui uploader
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.
Contributors2
Uh oh!
There was an error while loading.Please reload this page.