qh-plupload-oss-vue v1.1.0

qh-plupload-oss-vue 一款可配置的阿里云上传图片组件

安装方式：

npm install qh-plupload-oss-vue --save-dev


 plupload-vue上传 **图片** 组件，兼容性好，支持微信浏览器，通过授权token后上传，可限制上传数量，但提示方式及组件样式可自行调整。

使用方法

import vuePluploadOss from 'qh-plupload-oss-vue'

<vue-plupload-oss
      :options="upLoadOptions"
      :aPreviewPhotos="aPreviewPhotos"
      @FilesAdded="FilesAdded"
      @BeforeUpload="BeforeUpload"
      @FileUploaded="FileUploaded"
      @deletePreviewPhoto="deletePreviewPhoto"
></vue-plupload-oss>


export default {
			data(){
				return {
					upLoadOptions: {
						selectBtn: "selectBtn", // 点击选择上传的元素，自己随便写，但是使用多个组件时不能重名
		        multiple: false, // 是否支持选择多张图片 true=》支持 false=》不支持
		        maxSize: "20mb", // 允许上传图片最大尺寸，单位kb, mb, 默认20mb
		        prevent_duplicates: false, // 是否阻止选取重复的文件 true=》阻止 false=》不阻止
		        maxNumber: 6 // 最大上传图片数量，默认6张
					},
					// 可以自行添加其他需要的字段
					aPreviewPhotos: [{
						dataUrl: 上传的图片的预览图片用的base64编码,
						id: 上传的图片的id,
						status: 0 // 上传状态 0=》正在上传 1=》上传完成
					}]
				}
			},
    components: {
		    vuePluploadOss
		  }
}

回调事件

通过接收、重写回调事件可以自定义开发所需的流程，UI可以根据情况自行更改调整。 demo中一些样式是使用了自己项目的所以需要自行更改样式。 demo中一些函数方法也是使用了自己项目的方法， 该组件1.0.0仅可以提供大家一些思路，等有空闲时间把自己项目的一些样式方法剥除大家就能使用。 options (object) plupload配置项 aPreviewPhotos (arr) 预览图片的数组 FilesAdded ({up, files}) 上传之后可以通过 object.oss_name 获得oss文件名 uploadTitle设置成文字时候显示上传页头文字 BeforeUpload ({up, file}) FileUploaded ({up, file, info}) deletePreviewPhoto ({up, photoId})

Token获取参考官方SDK

https://help.aliyun.com/document_detail/31920.html?spm=a2c4g.11186623.6.629.CKS3hE