uniapp selects local resources (pictures, videos, files)

Enterprise 2023-09-16 01:03:38 views: null

1. uni.chooseImage(OBJECT)

Select a picture from your local photo album or take a photo with your camera.

If you need a richer camera API on the App side (such as calling the front camera directly), please refer to plus.camera

OBJECT parameter description

parameter name type Required illustrate Platform differences explained
count Number no The maximum number of pictures that can be selected, default 9 See instructions below
sizeType Array<String> no original original image, compressed compressed image, both are available by default App, WeChat applet, Alipay applet, Baidu applet
extension Array<String> no Filter based on file extension, each item cannot be an empty string. No filtering by default. H5(HBuilder X2.9.9+)
sourceType Array<String> no album selects pictures from the album, camera uses the camera, and both are available by default. If you want to open the camera directly or select an album directly, please use only one option
success Function yes If successful, the local file path list tempFilePaths of the image is returned.
fail Function no Callback function for interface call failure Mini program, App
complete Function no The callback function at the end of the interface call (executed whether the call is successful or failed)

Tips

  • The performance of the count value on the H5 platform is based on the browser's own specifications. Judging from the current test results, only single/multiple selections can be restricted, but the quantity cannot be limited. Moreover, few actual mobile browsers can support multiple selections.
  • The corresponding attribute of sourceType on the H5 side is set to inputinvalid , and the camera can still be used.capture['album']
  • You can use the user authorization API to determine whether the user has granted the application access rights to the photo album or camera uni.authorize(OBJECT) | uni-app official website
  • If you need to select non-media files on the App side, you can search for file selection in the plug-in market . The Android side can use Native.js without native plug-ins, while the iOS side requires native plug-ins.

Note: The temporary path of the file can be used normally during the current startup of the application. If it needs to be saved persistently, you need to actively call  uni.saveFile , and it can be accessed the next time the application starts.

success return parameter description

parameter type illustrate
tempFilePaths Array<String> List of local file paths for images
tempFiles Array<Object>、Array<File> Local file list of pictures, each item is a File object

The File object structure is as follows

parameter type illustrate
path String local file path
size Number Local file size, unit: B
name String File name containing extension, only supported by H5
type String File type, only supported by H5

Example

uni.chooseImage({
    count: 6, //默认9
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album'], //从相册选择
    success: function (res) {
        console.log(JSON.stringify(res.tempFilePaths));
    }
});

2. uni.previewImage(OBJECT) @unipreviewimageobject

preview picture.

OBJECT parameter description

parameter name type Required illustrate Platform differences explained
current String/Number See instructions below for details See instructions below for details
urls Array<String> yes List of image links that need to be previewed
indicator String no Picture indicator style, possible values: "default" - bottom dot indicator; "number" - top number indicator; "none" - no indicator is displayed. App
loop Boolean no Whether the preview can be looped, the default value is false App
longPressActions Object no Long press the picture to display the operation menu. If not filled in, the default is to save the album. App 1.9.5+
success Function no Callback function for successful interface call
fail Function no Callback function for interface call failure
complete Function no The callback function at the end of the interface call (executed whether the call is successful or failed)

current parameter description

1.9.5+ supports passing the index value of images in urls

current is the link/index value of the currently displayed image. If it is not filled in or the filled-in value is invalid, it will be the first one in the urls. The App platform is between 1.9.5 and 1.9.8, and current is required. If you do not fill it in, an error will be reported.

Note that when there are duplicate image links in urls:

  • When you pass a link, the preview result always shows the position where the link first appears in URLs.
  • If you pass the index value, on the WeChat/Baidu/ByteDance mini-program platform, the index value in the incoming URLs will be filtered out with duplicate values ​​of its corresponding image link. Other platforms will retain the original URLs without deduplication.

for example:

A set of pictures  [A, B1, C, B2, D], where the picture links of B1 and B2 are the same.

  • Pass the link of B2, the preview result is B1, the previous picture is A, and the next picture is C.
  • Pass the index value 3 of B2, the preview result is B2, the previous picture is C, and the next picture is D. At this time, on the WeChat/Baidu/ByteDance mini-program platform, the final incoming urls are  [A, C, B2, D], B1 that is duplicated with B2 is filtered out.

longPressActions parameter description

parameter type Required illustrate
itemList Array<String> yes Button text array
itemColor String no The text color of the button, string format, default is "#000000"
success Function no The callback function for successful interface call, please see the return parameter description for details.
fail Function no Callback function for interface call failure
complete Function no The callback function at the end of the interface call (executed whether the call is successful or failed)

success return parameter description

parameter type illustrate
index Number The index value of the image that the user long presses
tapIndex Number The index value of the button list that the user clicked

Example

// 从相册选择6张图
uni.chooseImage({
    count: 6,
    sizeType: ['original', 'compressed'],
    sourceType: ['album'],
    success: function(res) {
        // 预览图片
        uni.previewImage({
            urls: res.tempFilePaths,
            longPressActions: {
                itemList: ['发送给朋友', '保存图片', '收藏'],
                success: function(data) {
                    console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
                },
                fail: function(err) {
                    console.log(err.errMsg);
                }
            }
        });
    }
    });

TIPS

  • On the non-H5 side, previewImage is implemented natively, and the flexibility of interface customization is low.
  • The plug-in market has a front-end implementation of previewImage, whose performance is lower than the native implementation, but the interface can be defined at will; the plug-in market also has a native previewImage plug-in suitable for the App side, which provides more functions.

3. uni.chooseMedia(OBJECT)

Take or select a picture or video from your phone's photo album.

If you select and upload non-image or video files, please refer to: https://uniapp.dcloud.io/api/media/file.

Platform differences explained

App H5 WeChat applet Alipay applet Baidu Mini Program ByteDance Mini Program, Feishu Mini Program QQ applet 快手小程序 京东小程序
x x 2.10.0+ x x √ x x √

OBJECT 参数说明

参数名 类型 默认值 必填 说明
count Number 9（注意：ios不可大于9） 否 最多可以选择的文件个数
mediaType Array. [‘image’, ‘video’] 否 文件类型
sourceType Array. [‘album’, ‘camera’] 否 图片和视频选择的来源
maxDuration Number 10 否 拍摄视频最长拍摄时间，单位秒。时间范围为 3s 至 30s 之间
sizeType Array. [‘original’, ‘compressed’] 否 仅对 mediaType 为 image 时有效，是否压缩所选文件
camera String ‘back’ 否 仅在 sourceType 为 camera 时生效，使用前置或后置摄像头
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

OBJECT.mediaType 合法值

值 说明
image 只能拍摄图片或从相册选择图片
video 只能拍摄视频或从相册选择视频
mix 可同时选择图片和视频

OBJECT.sourceType 合法值

值 说明
album 从相册选择
camera 使用相机拍摄

OBJECT.camera 合法值

值 说明
back 使用后置摄像头
front 使用前置摄像头

success 返回参数说明

参数名 类型 说明
tempFiles Array. 本地临时文件列表
type String 文件类型，有效值有 image 、video、mix

res.tempFiles 的结构

参数名 类型 说明
tempFilePath String 本地临时文件路径 (本地路径)
size Number 本地临时文件大小，单位 B
duration Number 视频的时间长度
height Number 视频的高度
width Number 视频的宽度
thumbTempFilePath String 视频缩略图临时文件路径
fileType String 文件类型

fileType 合法值

值 说明
image 图片
video 视频

示例

uni.chooseMedia({
  count: 9,
  mediaType: ['image','video'],
  sourceType: ['album', 'camera'],
  maxDuration: 30,
  camera: 'back',
  success(res) {
    console.log(res.tempFiles)
  }
})

Tips

Guess you like

Origin blog.csdn.net/m0_67388537/article/details/131804278
Recommended
Ranking
[Algorithm] greedy _ program scheduling issues
Spring 控制反转（IOC）
Data structure-6.6 figure
Indicates that the class or member method has abstract properties
Huawei v5 server installed Linux operating system
Postgresql source code analysis - creating ordinary tables
Chapter 10 Evaluation Classification Results
Cloud service Ubuntu 20.04 version uses Nginx to deploy static web pages
Java Exercise 17.1
Solve the problem that git cannot automatically push submission in IDEA Push failed: Failed with error: Could not read from remote repository.
Daily
More
2024-05-09(32)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(36)

Code World

© 2018 codetd.com