vue weui上传_Weui上传器的移动Vue组件实现

vue weui上传

vux-uploader-component (vux-uploader-component)

a mobile vue component implementation for weui uploader.

weui上传器的移动vue组件实现。

View Demo 查看演示 View Github 查看Github

用法 (Usage)

基本的 (Basic)

<template>
  <uploader
    v-model="fileList"
    :url="remoteUrl"
    @on-change="onChange"
    @on-cancel="onCancel"
    @on-success="onSuccess"
    @on-error="onError"
    @on-delete="onDelete"
  ></uploader>
</template>
<script>
  import Uploader from "vux-uploader-component";

  export default {
    components: {
      Uploader
    },
    data() {
      return {
        fileList: []
      };
    }
  };
</script>

自定义名称 (Custom name)

<uploader
  v-model="fileList"
  :url="remoteUrl"
  name="upload"
></uploader>

额外参数 (Extra Params)

<uploader
  v-model="fileList"
  :url="remoteUrl"
  :params="{
    token: '13579',
    linkid: '2323',
    modelname: 'modelname'
  }"
></uploader>

手动上传 (Manual Upload)

<template>
  <uploader v-model="fileList" :autoUpload="false"></uploader>
</template>
<script>
  import Uploader from "vux-uploader-component";

  export default {
    components: {
      Uploader
    },
    data() {
      return {
        fileList: []
      };
    },
    methods: {
      submit() {
        const formData = new FormData();
        formData.append("file", fileList[0].blob);
        fetch
          .post(url, formData)
          .then(() => {})
          .catch(() => {});
      }
    }
  };
</script>

道具 (Props)

property	type	default	description
title	String	'图片上传'	组件标题
files	Array	[]	初始化数据源，通过on-fileList-change事件绑定 v-model
limit	Number | String	5	限制上传图片个数
capture	Number | String	false	是否只选择调用相机
enableCompress	Boolean	true	是否压缩
maxWidth	String | Number	1024	图片压缩最大宽度
quality	String | Number	0.92	图片压缩率
url	String	-	上传服务器 url
params	Object	-	上传文件时携带的自定义参数
name	String	'file'	上传文件时 FormData 的 Key，默认为 file
autoUpload	Boolean	true	是否自动开启上传
multiple	String | Boolean	""	是否支持多选, false为不支持
readonly	Boolean	false	只读模式(隐藏添加和删除按钮)

属性	类型	默认	描述
标题	串	图片上传	组件标题
档案	数组	[]	初始化数据源，通过on-fileList-change事件绑定v模型
限制	编号 串	5	限制上传图片个数
捕获	编号 串	假	是否只选择调用相机
enableCompress	布尔型	真正	是否压缩
maxWidth	字串| 数	1024	图片压缩最大宽度
质量	字串| 数	0.92	图片压缩率
网址	串	--	发布服务器网址
参数	目的	--	发布文件时携带的自定义参数
名称	串	'文件'	上传文件时FormData的Key，替换为文件
自动上传	布尔型	真正	是否自动开启上传
多	字串| 布尔型	”	是否支持多选， false为不支持
只读	布尔型	假	预期模式(隐藏添加和删除按钮)

大事记 (Events)

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事件的时候，直接执行删除回调

事件	参数	描述
不断变化	(FileItem, FileList)	选完照片，删除照片时，FileList变化时触发，返回当前改变的FileItem，以及当前的FileList
取消	()	选择照片后取消的替代，用于错误提示
成功	(result, fileItem)	上传请求成功后的一部分，返回远程请求的返回结果，以及当前添加文件的FileItem
错误的	(xhr)	发布请求失败后的局部，返回xhr
删除中	(cb)	删除照片时的大小，返回隐藏预览器，删除图片的替换，没监听到onDelete的时候，直接执行删除替换

模型 (v-model)

通过 v-model 可以在组件外部获取更新的组件的FileList

通过v-model可以在组件外部获取更新的组件的FileList

返回的FileItem格式 (返回的 FileItem 格式)

目前将 File 对象的属性复制组成 FielItem, FileItem 组成 FileList，便于用户获取 File 对象的信息

目前将文件对象的属性复制组成FielItem，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"
}

发展历程 (Development)

# install dependencies
npm install

# serve with hot reload at http://0.0.0.0:8080/
npm run dev

# build for production with minification
npm run build:prod

# publish package
npm version patch
npm publish

翻译自: https://vuejsexamples.com/a-mobile-vue-component-implementation-for-weui-uploader/

vue weui上传