ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Gallery模块管理系统相册,支持从相册中选择图片或视频文件、保存图片或视频文件到相册等功能。通过plus.gallery获取相册管理对象

2022-02-07 17:59:34  阅读:246  来源: 互联网

标签:function console log 相册 选择 视频文件 图片


方法:

  • pick: 从系统相册选择文件(图片或视频)
  • save: 保存文件到系统相册中

对象:

回调方法:

权限:

5+功能模块(permissions)

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#ffffff">{</span>
<span style="color:#87ceeb">// ...</span>
<span style="color:#ffa0a0">"permissions"</span><span style="color:#ffffff">:{</span>
	<span style="color:#87ceeb">// ...</span>
	<span style="color:#ffa0a0">"Gallery"</span><span style="color:#ffffff">:</span> <span style="color:#ffffff">{</span>
		<span style="color:#ffa0a0">"description"</span><span style="color:#ffffff">:</span> <span style="color:#ffa0a0">"系统相册"</span>
	<span style="color:#ffffff">}</span>
<span style="color:#ffffff">}</span>
<span style="color:#ffffff">}</span>
			</code></span></span>

pick

从系统相册选择文件(图片或视频)

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">gallery</span><span style="color:#ffffff">.</span><span style="color:#ffffff">pick</span><span style="color:#ffffff">(</span><span style="color:#ffffff">successCB</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> errorCB</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> options</span><span style="color:#ffffff">);</span>
				</code></span></span>

说明:

从系统相册中选择图片或视频文件。每次仅能选择一个文件,选择后将返回选择的文件路径。

参数:

  • succesCB: GalleryPickSuccessCallback | GalleryMultiplePickSuccessCallback ) 必选 从系统相册中选择文件完成后的回调函数

    单选时通过GalleryPickSuccessCallback回调函数返回选择的图片或视频文件路径,多选时通过GalleryMultiplePickSuccessCallback回调函数返回图片或视频文件路径。

  • errorCB: GalleryErrorCallback ) 可选 从系统相册中选择文件操作错误的回调函数

  • options: GalleryOptions ) 可选 设置选择文件的参数

返回值:

void : 无

平台支持:

  • Android - 2.2+ (支持) :

    返回的是系统相册路径,如“file:///storage/sdcard0/DCIM/Camera/1428841301674.jpg”。

  • iOS - 5.1+ (支持) :

    受系统相册路径的访问限制,选择后图片会先拷贝到应用沙盒下的"_doc"目录中,如“file:///var/mobile/Applications/0373DFBF-6AA7-4C9B-AE1F-766469117C94/Library/Pandora/apps/HBuilder/doc/IMG_0005.jpg”。

示例:

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#87ceeb">// 从相册中选择图片 </span>
<span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> galleryImg</span><span style="color:#ffffff">()</span> <span style="color:#ffffff">{</span>
	<span style="color:#87ceeb">// 从相册中选择图片</span><span style="color:#ffffff">
	console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">"从相册中选择图片:"</span><span style="color:#ffffff">);</span><span style="color:#ffffff">
    plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">gallery</span><span style="color:#ffffff">.</span><span style="color:#ffffff">pick</span><span style="color:#ffffff">(</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(</span><span style="color:#ffffff">path</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
    	console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffffff">path</span><span style="color:#ffffff">);</span>
    <span style="color:#ffffff">},</span> <span style="color:#f0e68c"><strong>function</strong></span> <span style="color:#ffffff">(</span><span style="color:#ffffff"> e </span><span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">
    	console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span> <span style="color:#ffa0a0">"取消选择图片"</span> <span style="color:#ffffff">);</span>
    <span style="color:#ffffff">},</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">filter</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">"image"</span><span style="color:#ffffff">}</span> <span style="color:#ffffff">);</span>
<span style="color:#ffffff">}</span>
<span style="color:#87ceeb">// 从相册中选择多张图片 </span>
<span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> galleryImgs</span><span style="color:#ffffff">(){</span>
	<span style="color:#87ceeb">// 从相册中选择图片</span><span style="color:#ffffff">
	console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">"从相册中选择多张图片:"</span><span style="color:#ffffff">);</span><span style="color:#ffffff">
    plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">gallery</span><span style="color:#ffffff">.</span><span style="color:#ffffff">pick</span><span style="color:#ffffff">(</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">){</span>
    	<span style="color:#f0e68c"><strong>for</strong></span><span style="color:#ffffff">(</span><span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> i </span><span style="color:#f0e68c"><strong>in</strong></span><span style="color:#ffffff"> e</span><span style="color:#ffffff">.</span><span style="color:#ffffff">files</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
	    	console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">.</span><span style="color:#ffffff">files</span><span style="color:#ffffff">[</span><span style="color:#ffffff">i</span><span style="color:#ffffff">]);</span>
    	<span style="color:#ffffff">}</span>
    <span style="color:#ffffff">},</span> <span style="color:#f0e68c"><strong>function</strong></span> <span style="color:#ffffff">(</span><span style="color:#ffffff"> e </span><span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">
    	console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span> <span style="color:#ffa0a0">"取消选择图片"</span> <span style="color:#ffffff">);</span>
    <span style="color:#ffffff">},{</span><span style="color:#ffffff">filter</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">"image"</span><span style="color:#ffffff">,</span><span style="color:#ffffff">multiple</span><span style="color:#ffffff">:</span><span style="color:#f0e68c"><strong>true</strong></span><span style="color:#ffffff">});</span>
<span style="color:#ffffff">}</span>
				</code></span></span>

uni-app使用plus注意事项

save

保存文件到系统相册中

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">gallery</span><span style="color:#ffffff">.</span><span style="color:#ffffff">save</span><span style="color:#ffffff">(</span><span style="color:#ffffff"> path</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> successCB</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> errorCB </span><span style="color:#ffffff">);</span>
				</code></span></span>

说明:

保存文件到系统相册中。 每次仅能保存一个文件,支持图片文件(jpg/jpeg、png、bmp等格式)和视频文件(3gp、mov等格式)。 若保存的文件类型当前系统不支持,则通过errorCB回调返回错误信息。

参数:

  • path : ( String ) 必选 要保存到系统相册中的文件文件地址

  • succesCB: GallerySuccessCallback ) 必选 保存文件到系统相册中成功的回调函数

  • errorCB: GalleryErrorCallback ) 可选 保存文件到系统相册中失败的回调函数

返回值:

void : 无

平台支持:

  • Android - 2.2+ (支持)
  • iOS - 4.3+ (支持)

示例:

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#87ceeb">// 保存图片到相册中 </span>
<span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> savePicture</span><span style="color:#ffffff">()</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">
	plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">gallery</span><span style="color:#ffffff">.</span><span style="color:#ffffff">save</span><span style="color:#ffffff">(</span> <span style="color:#ffa0a0">"_doc/a.jpg"</span><span style="color:#ffffff">,</span> <span style="color:#f0e68c"><strong>function</strong></span> <span style="color:#ffffff">()</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">
		alert</span><span style="color:#ffffff">(</span> <span style="color:#ffa0a0">"保存图片到相册成功"</span> <span style="color:#ffffff">);</span>
	<span style="color:#ffffff">}</span> <span style="color:#ffffff">);</span>
<span style="color:#ffffff">}</span>
				</code></span></span>

uni-app使用plus注意事项

GalleryOptions

JSON对象,从相册中选择文件的参数

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#f0e68c"><strong>interface</strong></span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">gallery</span><span style="color:#ffffff">.</span><span style="color:#98fb98">GalleryOptions</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">
	attribute </span><span style="color:#98fb98">Boolean</span><span style="color:#ffffff"> animation</span><span style="color:#ffffff">;</span><span style="color:#ffffff">
	attribute </span><span style="color:#98fb98">String</span><span style="color:#ffffff"> confirmText</span><span style="color:#ffffff">;</span><span style="color:#ffffff">
	attribute </span><span style="color:#98fb98">GalleryCropStyles</span><span style="color:#ffffff"> crop</span><span style="color:#ffffff">;</span><span style="color:#ffffff">
	attribute </span><span style="color:#98fb98">Boolean</span><span style="color:#ffffff"> editable</span><span style="color:#ffffff">;</span><span style="color:#ffffff">
	attribute </span><span style="color:#98fb98">String</span><span style="color:#ffffff"> filename</span><span style="color:#ffffff">;</span><span style="color:#ffffff">
	attribute </span><span style="color:#98fb98">GalleryFilter</span><span style="color:#ffffff"> filter</span><span style="color:#ffffff">;</span><span style="color:#ffffff">
	attribute </span><span style="color:#98fb98">Number</span><span style="color:#ffffff"> maximum</span><span style="color:#ffffff">;</span><span style="color:#ffffff">
	attribute </span><span style="color:#98fb98">Boolean</span><span style="color:#ffffff"> multiple</span><span style="color:#ffffff">;</span><span style="color:#ffffff">
	attribute </span><span style="color:#98fb98">Boolean</span><span style="color:#ffffff"> permissionAlert</span><span style="color:#ffffff">;</span><span style="color:#ffffff">
	attribute </span><span style="color:#98fb98">PopPosition</span><span style="color:#ffffff"> popover</span><span style="color:#ffffff">;</span><span style="color:#ffffff">
	attribute </span><span style="color:#98fb98">Array</span><span style="color:#ffffff"><</span><span style="color:#98fb98">String</span><span style="color:#ffffff">></span><span style="color:#ffffff"> selected</span><span style="color:#ffffff">;</span><span style="color:#ffffff">
	attribute </span><span style="color:#98fb98">Boolean</span><span style="color:#ffffff"> system</span><span style="color:#ffffff">;</span><span style="color:#ffffff">
	attribute </span><span style="color:#98fb98">Function</span><span style="color:#ffffff"> onmaxed</span><span style="color:#ffffff">;</span>
<span style="color:#ffffff">}</span>
				</code></span></span>

属性:

  • animation: (Boolean 类型 )是否显示系统相册文件选择界面的动画

    可取值true、false,默认值为true。

    平台支持

    • Android - 2.2+ (不支持) :

      忽略此参数,无动画效果。

    • iOS - 4.3+ (支持) :

      支持动画效果。

  • confirmText: (String 类型 )确认按钮文字

    不传入此参数时,使用默认确认按钮文字“确定”。
    注意:HBuilderX3.1.5+版本支持。

  • crop: (GalleryCropStyles 类型 )配置裁剪图片

    设置裁剪图片项后,在相册中选择图片一定会进入裁剪编辑界面,确认后返回裁剪后的图片。
    设置此值后只能选择一张图片。 注意:HBuilderX3.1.19及以上版本支持。

  • editable: (Boolean 类型 )是否支持编辑图片

    可取值true、false,默认值为true。
    注意:HBuilderX3.1.5+版本支持。

  • filename: (String 类型 )选择文件保存的路径

    某些系统不能直接使用系统相册的路径,这时需要将选择的文件保存到应用可访问的目录中,可通过此参数设置保存文件的路径。 如果路径中包括文件后缀名称,则表明指定文件路径及名称,否则仅指定文件保存目录,文件名称自动生成。

    平台支持

    • Android - 2.2+ (不支持) :

      直接返回系统相册中的文件路径,忽略此参数。

    • iOS - 4.3+ (支持) :

      如果未设置则默认使用应用临时目录(系统在磁盘控件不足时自动清理)。 如果希望将文件拷贝到应用沙箱目录中,可通过此参数配置目标路径(如"_doc/gallery/")。

  • filter: (GalleryFilter 类型 )相册中选择文件类型过滤器

    系统相册选择器中可选择的文件类型,可设置为仅选择图片文件(“image”)、视频文件(“video”)或所有文件(“none”),默认值为“image”。

    <span style="background-color:#333333"><code>
    <span style="color:#87ceeb">// 从相册中选择图片 </span>
    <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> galleryImg</span><span style="color:#ffffff">()</span> <span style="color:#ffffff">{</span>
    	<span style="color:#87ceeb">// 从相册中选择图片</span><span style="color:#ffffff">
    	console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">"从相册中选择图片:"</span><span style="color:#ffffff">);</span><span style="color:#ffffff">
        plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">gallery</span><span style="color:#ffffff">.</span><span style="color:#ffffff">pick</span><span style="color:#ffffff">(</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(</span><span style="color:#ffffff">path</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
        	console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffffff">path</span><span style="color:#ffffff">);</span>
        <span style="color:#ffffff">},</span> <span style="color:#f0e68c"><strong>function</strong></span> <span style="color:#ffffff">(</span><span style="color:#ffffff"> e </span><span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">
        	console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span> <span style="color:#ffa0a0">"取消选择图片"</span> <span style="color:#ffffff">);</span>
        <span style="color:#ffffff">},</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">filter</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">"image"</span><span style="color:#ffffff">}</span> <span style="color:#ffffff">);</span>
    <span style="color:#ffffff">}</span>
    						</code></span>
  • maximum: (Number 类型 )最多选择的图片数量

    仅在支持多选时有效,取值范围为1到Infinity,默认值为Infinity,即不限制选择的图片数。 如果设置的值非法则使用默认值Infinity。

    <span style="background-color:#333333"><code>
    <span style="color:#87ceeb">// 从相册中选择多张图片 </span>
    <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> galleryMaximum</span><span style="color:#ffffff">(){</span>
    	<span style="color:#87ceeb">// 从相册中选择图片</span><span style="color:#ffffff">
    	console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">"从相册中选择多张图片:"</span><span style="color:#ffffff">);</span><span style="color:#ffffff">
        plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">gallery</span><span style="color:#ffffff">.</span><span style="color:#ffffff">pick</span><span style="color:#ffffff">(</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">){</span>
        	<span style="color:#f0e68c"><strong>for</strong></span><span style="color:#ffffff">(</span><span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> i </span><span style="color:#f0e68c"><strong>in</strong></span><span style="color:#ffffff"> e</span><span style="color:#ffffff">.</span><span style="color:#ffffff">files</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
    	    	console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">.</span><span style="color:#ffffff">files</span><span style="color:#ffffff">[</span><span style="color:#ffffff">i</span><span style="color:#ffffff">]);</span>
        	<span style="color:#ffffff">}</span>
        <span style="color:#ffffff">},</span> <span style="color:#f0e68c"><strong>function</strong></span> <span style="color:#ffffff">(</span><span style="color:#ffffff"> e </span><span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">
        	console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span> <span style="color:#ffa0a0">"取消选择图片"</span> <span style="color:#ffffff">);</span>
        <span style="color:#ffffff">},{</span><span style="color:#ffffff">filter</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">"image"</span><span style="color:#ffffff">,</span><span style="color:#ffffff">multiple</span><span style="color:#ffffff">:</span><span style="color:#f0e68c"><strong>true</strong></span><span style="color:#ffffff">,</span><span style="color:#ffffff">maximum</span><span style="color:#ffffff">:</span><span style="color:#cd5c5c">3</span><span style="color:#ffffff">,</span><span style="color:#ffffff">system</span><span style="color:#ffffff">:</span><span style="color:#f0e68c"><strong>false</strong></span><span style="color:#ffffff">});</span><span style="color:#87ceeb">// 最多选择3张图片</span>
    <span style="color:#ffffff">}</span>
    						</code></span>
  • multiple: (Boolean 类型 )是否支持多选图片

    可从系统相册中选择多张图片,选择图片后通过GalleryMultiplePickSuccessCallback回调返回选择的图片。

    <span style="background-color:#333333"><code>
    <span style="color:#87ceeb">// 从相册中选择多张图片 </span>
    <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> galleryImgs</span><span style="color:#ffffff">(){</span>
    	<span style="color:#87ceeb">// 从相册中选择图片</span><span style="color:#ffffff">
    	console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">"从相册中选择多张图片:"</span><span style="color:#ffffff">);</span><span style="color:#ffffff">
        plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">gallery</span><span style="color:#ffffff">.</span><span style="color:#ffffff">pick</span><span style="color:#ffffff">(</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">){</span>
        	<span style="color:#f0e68c"><strong>for</strong></span><span style="color:#ffffff">(</span><span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> i </span><span style="color:#f0e68c"><strong>in</strong></span><span style="color:#ffffff"> e</span><span style="color:#ffffff">.</span><span style="color:#ffffff">files</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
    	    	console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">.</span><span style="color:#ffffff">files</span><span style="color:#ffffff">[</span><span style="color:#ffffff">i</span><span style="color:#ffffff">]);</span>
        	<span style="color:#ffffff">}</span>
        <span style="color:#ffffff">},</span> <span style="color:#f0e68c"><strong>function</strong></span> <span style="color:#ffffff">(</span><span style="color:#ffffff"> e </span><span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">
        	console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span> <span style="color:#ffa0a0">"取消选择图片"</span> <span style="color:#ffffff">);</span>
        <span style="color:#ffffff">},{</span><span style="color:#ffffff">filter</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">"image"</span><span style="color:#ffffff">,</span><span style="color:#ffffff">multiple</span><span style="color:#ffffff">:</span><span style="color:#f0e68c"><strong>true</strong></span><span style="color:#ffffff">});</span>
    <span style="color:#ffffff">}</span>
    						</code></span>
  • onmaxed: (Function 类型 )超过最多选择图片数量事件

    使用相册多选图片时,可通过maximum属性设置最多选择的图片数量,当用户操作选择的数量大于此时触发此事件。

    平台支持

    • Android - ALL (支持) :

      系统相册文件选择界面不支持设置选择的图片数量,只有当用户选择的图片数量超过最多图片数是触发,为了确保此功能可正常使用,应该设置system属性值为false强制使用5+统一相册选择界面。 注意:此时显示的相册文件选择界面,需要使用plus.nativeUI.*弹出提示框,否则可能无法正常显示。

    • iOS - ALL (支持)
    <span style="background-color:#333333"><code>
    <span style="color:#87ceeb">// 从相册中选择多张图片 </span>
    <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> galleryOnmaxed</span><span style="color:#ffffff">(){</span>
    	<span style="color:#87ceeb">// 从相册中选择图片</span><span style="color:#ffffff">
    	console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">"从相册中选择多张图片:"</span><span style="color:#ffffff">);</span><span style="color:#ffffff">
        plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">gallery</span><span style="color:#ffffff">.</span><span style="color:#ffffff">pick</span><span style="color:#ffffff">(</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">){</span>
        	<span style="color:#f0e68c"><strong>for</strong></span><span style="color:#ffffff">(</span><span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> i </span><span style="color:#f0e68c"><strong>in</strong></span><span style="color:#ffffff"> e</span><span style="color:#ffffff">.</span><span style="color:#ffffff">files</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
    	    	console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">.</span><span style="color:#ffffff">files</span><span style="color:#ffffff">[</span><span style="color:#ffffff">i</span><span style="color:#ffffff">]);</span>
        	<span style="color:#ffffff">}</span>
        <span style="color:#ffffff">},</span> <span style="color:#f0e68c"><strong>function</strong></span> <span style="color:#ffffff">(</span><span style="color:#ffffff"> e </span><span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">
        	console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span> <span style="color:#ffa0a0">"取消选择图片"</span> <span style="color:#ffffff">);</span>
        <span style="color:#ffffff">},{</span><span style="color:#ffffff">filter</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">"image"</span><span style="color:#ffffff">,</span><span style="color:#ffffff">multiple</span><span style="color:#ffffff">:</span><span style="color:#f0e68c"><strong>true</strong></span><span style="color:#ffffff">,</span><span style="color:#ffffff">maximum</span><span style="color:#ffffff">:</span><span style="color:#cd5c5c">3</span><span style="color:#ffffff">,</span><span style="color:#ffffff">system</span><span style="color:#ffffff">:</span><span style="color:#f0e68c"><strong>false</strong></span><span style="color:#ffffff">,</span><span style="color:#ffffff">onmaxed</span><span style="color:#ffffff">:</span><span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(){</span><span style="color:#ffffff">
    		plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">nativeUI</span><span style="color:#ffffff">.</span><span style="color:#ffffff">alert</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'最多只能选择3张图片'</span><span style="color:#ffffff">);</span>
        <span style="color:#ffffff">}});</span><span style="color:#87ceeb">// 最多选择3张图片</span>
    <span style="color:#ffffff">}</span>
    						</code></span>
  • permissionAlert: (Boolean 类型 )是否检测权限

    可取值:

    • true - 检测到用户没有授权访问相册,将会弹出提示框引导用户授权
    • false - 检测到用户没有授权访问相册,触发错误回调,无界面提示
    默认值为false。

    平台支持

    • Android - ALL (不支持)
    • iOS - 8.0+ (支持) :

      HBuilderX2.9.5+版本支持,iOS14上如果设置为访问`选中的照片`权限时引导修改为访问`所有照片`

  • popover: (PopPosition 类型 )相册选择界面弹出指示区域

    对于大屏幕设备如iPad,相册选择界面为弹出窗口,此时可通过此参数设置弹出窗口位置。 其为JSON对象,格式如{top:"10px",left:"10px",width:"200px",height:"200px"},所有值为像素值,左上坐标相对于容器的位置,默认弹出位置为屏幕居中。

  • selected: (Array[String] 类型 )已选择的图片路径列表

    仅在多图片选择时生效,相册选择界面将选中指定的图片路径列表。 如果指定的路径无效,则忽略此项;如果指定的路径数超过maximum属性指定的最大选择数目则超出的图片不选中。

    平台支持

    • Android - ALL (支持) :

      系统相册文件选择界面不支持设置已选择的图片列表,为了确保此功能可正常使用,应该设置system属性值为false强制使用5+统一相册选择界面。

    • iOS - ALL (支持)
    <span style="background-color:#333333"><code>
    <span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> lfs</span><span style="color:#ffffff">=</span><span style="color:#f0e68c"><strong>null</strong></span><span style="color:#ffffff">;</span><span style="color:#87ceeb">// 保留上次选择图片列表</span>
    <span style="color:#87ceeb">// 从相册中选择多张图片 </span>
    <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> gallerySelected</span><span style="color:#ffffff">(){</span>
    	<span style="color:#87ceeb">// 从相册中选择图片</span><span style="color:#ffffff">
    	console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">"从相册中选择多张图片:"</span><span style="color:#ffffff">);</span><span style="color:#ffffff">
        plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">gallery</span><span style="color:#ffffff">.</span><span style="color:#ffffff">pick</span><span style="color:#ffffff">(</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">){</span>
        	<span style="color:#f0e68c"><strong>for</strong></span><span style="color:#ffffff">(</span><span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> i </span><span style="color:#f0e68c"><strong>in</strong></span><span style="color:#ffffff"> e</span><span style="color:#ffffff">.</span><span style="color:#ffffff">files</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
    			lfs</span><span style="color:#ffffff">=</span><span style="color:#ffffff">e</span><span style="color:#ffffff">.</span><span style="color:#ffffff">files</span><span style="color:#ffffff">;</span><span style="color:#ffffff">
    	    	console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">.</span><span style="color:#ffffff">files</span><span style="color:#ffffff">[</span><span style="color:#ffffff">i</span><span style="color:#ffffff">]);</span>
        	<span style="color:#ffffff">}</span>
        <span style="color:#ffffff">},</span> <span style="color:#f0e68c"><strong>function</strong></span> <span style="color:#ffffff">(</span><span style="color:#ffffff"> e </span><span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">
        	console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span> <span style="color:#ffa0a0">"取消选择图片"</span> <span style="color:#ffffff">);</span>
        <span style="color:#ffffff">},{</span><span style="color:#ffffff">filter</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">"image"</span><span style="color:#ffffff">,</span><span style="color:#ffffff">multiple</span><span style="color:#ffffff">:</span><span style="color:#f0e68c"><strong>true</strong></span><span style="color:#ffffff">,</span><span style="color:#ffffff">selected</span><span style="color:#ffffff">:</span><span style="color:#ffffff">lfs</span><span style="color:#ffffff">,</span><span style="color:#ffffff">maximum</span><span style="color:#ffffff">:</span><span style="color:#cd5c5c">3</span><span style="color:#ffffff">,</span><span style="color:#ffffff">system</span><span style="color:#ffffff">:</span><span style="color:#f0e68c"><strong>false</strong></span><span style="color:#ffffff">});</span><span style="color:#87ceeb">// 最多选择3张图片</span>
    <span style="color:#ffffff">}</span>
    						</code></span>
  • system: (Boolean 类型 )是否使用系统相册文件选择界面

    废弃,HBuilderX2.9.6+版本不再使用系统自带相册选择控件。

GalleryCropStyles

裁剪图片设置项

说明:

注意:HBuilderX3.1.19及以上版本支持。

属性:

  • quality: (Number 类型 )裁剪后保存图片的质量

    取值范围为1-100,数值越小,质量越低(仅对jpg格式有效)。 默认值为80。

  • width: (Number 类型 )裁剪的宽度

    单位为px,用于计算裁剪宽高比。 必须设置此值。

  • height: (Number 类型 )裁剪的高度

    单位为px,用于计算裁剪宽高比。 必须设置此值。

  • resize: (Boolean 类型 )是否将图片保存为指定的宽高像素

    true表示将width和height作为裁剪保存图片的像素值,false表示使用图片编辑操作的真实像素值。
    默认值为true。
    设置为false时在裁剪编辑界面显示图片的像素值,设置为true时不显示。

  • saveToAlbum: (Boolean 类型 )裁剪后的图片是否保存到相册中

    true表示将裁剪后的图片保存到相册中,false表示不将裁剪后的图片保存到相册中。 默认值为false。
    HBuilder3.3.0+版本支持。

GalleryFilter

相册选择文件过滤类型

属性:

  • "image": (String 类型 )仅可选择图片文件
  • "video": (String 类型 )仅可选择视频文件
  • "none": (String 类型 )不过滤,可选择图片或视频文件

GallerySaveEvent

保存图片到相册成功事件

属性:

  • path: (String 类型 )保存到相册的图片路径

PopPosition

JSON对象,弹出拍照或摄像界面指示位置

属性:

  • top: (String 类型 )指示区域距离容器顶部的距离

    弹出拍照或摄像窗口指示区域距离容器顶部的距离,单位支持像素值(如"100px")和百分比(如"50%"),如不写单位则为像素值值。

  • left: (String 类型 )指示区域距离容器左侧的距离

    弹出拍照或摄像窗口指示区域距离容器左侧的距离,单位支持像素值(如"100px")和百分比(如"50%"),如不写单位则为像素值。

  • width: (String 类型 )指示区域的宽度

    弹出拍照或摄像窗口指示区域的宽度,单位支持像素值(如"100px")和百分比(如"50%"),如不写单位则为像素值。

  • height: (String 类型 )指示区域的高度

    弹出拍照或摄像窗口指示区域的高度,单位支持像素值(如"100px")和百分比(如"50%"),如不写单位则为像素值。

GalleryPickSuccessCallback

单选系统相册图片成功的回调

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> onSuccess</span><span style="color:#ffffff">(</span><span style="color:#ffffff"> file </span><span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span>
	<span style="color:#87ceeb">// Success code</span>
<span style="color:#ffffff">}</span>
				</code></span></span>

说明:

系统相册中单选图片或视频文件成功的回调函数,在选择文件操作成功时调用。

参数:

  • file: ( String ) 必选 选择的图片或视频文件路径

返回值:

void : 无

示例:

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#87ceeb">// 从相册中选择单张图片 </span>
<span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> galleryImg</span><span style="color:#ffffff">()</span> <span style="color:#ffffff">{</span>
	<span style="color:#87ceeb">// 从相册中选择图片</span><span style="color:#ffffff">
	console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">"从相册中选择图片:"</span><span style="color:#ffffff">);</span><span style="color:#ffffff">
    plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">gallery</span><span style="color:#ffffff">.</span><span style="color:#ffffff">pick</span><span style="color:#ffffff">(</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(</span><span style="color:#ffffff">path</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
    	console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffffff">path</span><span style="color:#ffffff">);</span>
    <span style="color:#ffffff">},</span> <span style="color:#f0e68c"><strong>function</strong></span> <span style="color:#ffffff">(</span><span style="color:#ffffff"> e </span><span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">
    	console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span> <span style="color:#ffa0a0">"取消选择图片"</span> <span style="color:#ffffff">);</span>
    <span style="color:#ffffff">},</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">filter</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">"image"</span><span style="color:#ffffff">}</span> <span style="color:#ffffff">);</span>
<span style="color:#ffffff">}</span>
				</code></span></span>

uni-app使用plus注意事项

GalleryMultiplePickSuccessCallback

多选系统相册图片成功的回调

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> onSuccess</span><span style="color:#ffffff">(</span> <span style="color:#f0e68c"><strong>event</strong></span> <span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span>
	<span style="color:#87ceeb">// Pick success</span>
	<span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> files </span><span style="color:#ffffff">=</span> <span style="color:#f0e68c"><strong>event</strong></span><span style="color:#ffffff">.</span><span style="color:#ffffff">files</span><span style="color:#ffffff">;</span> <span style="color:#87ceeb">// 保存多选的图片或视频文件路径</span>
<span style="color:#ffffff">}</span>
				</code></span></span>

说明:

系统相册中多选图片或视频文件成功的回调函数,在多选择文件操作成功时调用。

参数:

  • event: ( Event ) 必选 多选系统相册返回数据

    Event对象包含以下属性: files - 字符串数组,保存多选的图片或视频文件路径。

返回值:

void : 无

示例:

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#87ceeb">// 从相册中选择多张图片 </span>
<span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> galleryImgs</span><span style="color:#ffffff">(){</span>
	<span style="color:#87ceeb">// 从相册中选择图片</span><span style="color:#ffffff">
	console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">"从相册中选择多张图片:"</span><span style="color:#ffffff">);</span><span style="color:#ffffff">
    plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">gallery</span><span style="color:#ffffff">.</span><span style="color:#ffffff">pick</span><span style="color:#ffffff">(</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">){</span>
    	<span style="color:#f0e68c"><strong>for</strong></span><span style="color:#ffffff">(</span><span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> i </span><span style="color:#f0e68c"><strong>in</strong></span><span style="color:#ffffff"> e</span><span style="color:#ffffff">.</span><span style="color:#ffffff">files</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
	    	console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">.</span><span style="color:#ffffff">files</span><span style="color:#ffffff">[</span><span style="color:#ffffff">i</span><span style="color:#ffffff">]);</span>
    	<span style="color:#ffffff">}</span>
    <span style="color:#ffffff">},</span> <span style="color:#f0e68c"><strong>function</strong></span> <span style="color:#ffffff">(</span><span style="color:#ffffff"> e </span><span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">
    	console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span> <span style="color:#ffa0a0">"取消选择图片"</span> <span style="color:#ffffff">);</span>
    <span style="color:#ffffff">},{</span><span style="color:#ffffff">filter</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">"image"</span><span style="color:#ffffff">,</span><span style="color:#ffffff">multiple</span><span style="color:#ffffff">:</span><span style="color:#f0e68c"><strong>true</strong></span><span style="color:#ffffff">});</span>
<span style="color:#ffffff">}</span>
				</code></span></span>

uni-app使用plus注意事项

GallerySuccessCallback

操作系统相册成功的回调

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> onSuccess</span><span style="color:#ffffff">(</span><span style="color:#98fb98">GallerySaveEvent</span> <span style="color:#f0e68c"><strong>event</strong></span><span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span>
	<span style="color:#87ceeb">// Success code</span>
<span style="color:#ffffff">}</span>
				</code></span></span>

说明:

系统相册操作成功的回调函数,在保存文件到系统相册操作成功时调用。

参数:

  • event: GallerySaveEvent ) 必选 保存文件到系统相册成功事件对象

    可通过其path属性获取保存文件的路径。

返回值:

void : 无

GalleryErrorCallback

系统相册操作失败的回调

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> one rror</span><span style="color:#ffffff">(</span><span style="color:#ffffff"> error </span><span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span>
	<span style="color:#87ceeb">// Handle error</span>
	<span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> code </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> error</span><span style="color:#ffffff">.</span><span style="color:#ffffff">code</span><span style="color:#ffffff">;</span> <span style="color:#87ceeb">// 错误编码</span>
	<span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> message </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> error</span><span style="color:#ffffff">.</span><span style="color:#ffffff">message</span><span style="color:#ffffff">;</span> <span style="color:#87ceeb">// 错误描述信息</span>
<span style="color:#ffffff">}</span>
				</code></span></span>

说明:

系统相册操作失败的回调函数,在选择或保存图片操作失败时调用。

参数:

  • error: ( Exception ) 必选 相册操作失败的错误信息

    可通过error.code(Number类型)获取错误编码; 可通过error.message(String类型)获取错误描述信息。

返回值:

void : 无

标签:function,console,log,相册,选择,视频文件,图片
来源: https://blog.csdn.net/qq_40575646/article/details/122812440

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有