首页 › uni-app论坛 › uni-app 媒体之图片的使用

土豪姥姥 發表於 2021-3-17 15:29:00

uni-app 媒体之图片的使用

<h2 id="unichooseimageobject">uni.chooseImage(OBJECT)</h2>
<p>从本地相册选择图片或使用相机拍照。</p>
<p>App端如需要更丰富的相机拍照API（如直接调用前置摄像头），参考plus.camera</p>
<p><strong>OBJECT 参数说明</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">参数名</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">必填</th>
<th style="text-align: left">说明</th>
<th style="text-align: left">平台差异说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">count</td>
<td style="text-align: left">Number</td>
<td style="text-align: left">否</td>
<td style="text-align: left">最多可以选择的图片张数，默认9</td>
<td style="text-align: left">见下方说明</td>
</tr>
<tr>
<td style="text-align: left">sizeType</td>
<td style="text-align: left">Array<string></string></td>
<td style="text-align: left">否</td>
<td style="text-align: left">original 原图，compressed 压缩图，默认二者都有</td>
<td style="text-align: left">App、微信小程序、支付宝小程序、百度小程序</td>
</tr>
<tr>
<td style="text-align: left">extension</td>
<td style="text-align: left">Array<string></string></td>
<td style="text-align: left">否</td>
<td style="text-align: left">根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。</td>
<td style="text-align: left">H5(HBuilder X2.9.9+)</td>
</tr>
<tr>
<td style="text-align: left">sourceType</td>
<td style="text-align: left">Array<string></string></td>
<td style="text-align: left">否</td>
<td style="text-align: left">album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">success</td>
<td style="text-align: left">Function</td>
<td style="text-align: left">是</td>
<td style="text-align: left">成功则返回图片的本地文件路径列表 tempFilePaths</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">fail</td>
<td style="text-align: left">Function</td>
<td style="text-align: left">否</td>
<td style="text-align: left">接口调用失败的回调函数</td>
<td style="text-align: left">小程序、App</td>
</tr>
<tr>
<td style="text-align: left">complete</td>
<td style="text-align: left">Function</td>
<td style="text-align: left">否</td>
<td style="text-align: left">接口调用结束的回调函数（调用成功、失败都会执行）</td>
<td style="text-align: left"></td>
</tr>
</tbody>
</table>
<p><strong>Tips</strong></p>
<ul>
<li>count 值在 H5 平台的表现，基于浏览器本身的规范。目前测试的结果来看，只能限制单选/多选，并不能限制数量。并且，在实际的手机浏览器很少有能够支持多选的。</li>
<li>sourceType 在H5端对应<code>input</code>的<code>capture</code>属性，设置为<code>['album']</code>无效，依然可以使用相机。</li>
<li>可以通过用户授权API来判断用户是否给应用授予相册或摄像头的访问权限https://uniapp.dcloud.io/api/other/authorize</li>
<li>App端如需选择非媒体文件，可在插件市场搜索文件选择，其中Android端可以使用Native.js，无需原生插件，而iOS端需要原生插件。</li>
<li>选择照片大多为了上传，uni ui封装了更完善的uni-file-picker组件，文件选择、上传到uniCloud的免费存储和cdn中，一站式集成。强烈推荐使用。</li>
</ul>
<p><strong>注：文件的临时路径，在应用本次启动期间可以正常使用，如需持久保存，需在主动调用 uni.saveFile，在应用下次启动时才能访问得到。</strong></p>
<p><strong>success 返回参数说明</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">参数</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">tempFilePaths</td>
<td style="text-align: left">Array<string></string></td>
<td style="text-align: left">图片的本地文件路径列表</td>
</tr>
<tr>
<td style="text-align: left">tempFiles</td>
<td style="text-align: left">Array<object>、Array<file></file></object></td>
<td style="text-align: left">图片的本地文件列表，每一项是一个 File 对象</td>
</tr>
</tbody>
</table>
<p><strong>File 对象结构如下</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">参数</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">path</td>
<td style="text-align: left">String</td>
<td style="text-align: left">本地文件路径</td>
</tr>
<tr>
<td style="text-align: left">size</td>
<td style="text-align: left">Number</td>
<td style="text-align: left">本地文件大小，单位：B</td>
</tr>
<tr>
<td style="text-align: left">name</td>
<td style="text-align: left">String</td>
<td style="text-align: left">包含扩展名的文件名称，仅H5支持</td>
</tr>
<tr>
<td style="text-align: left">type</td>
<td style="text-align: left">String</td>
<td style="text-align: left">文件类型，仅H5支持</td>
</tr>
</tbody>
</table>
<p><strong>示例</strong></p>
<pre><code class="language-javascript">uni.chooseImage({
    count: 6, //默认9
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album'], //从相册选择
    success: function (res) {
      console.log(JSON.stringify(res.tempFilePaths));
    }
});
</code></pre>
<h2 id="unipreviewimageobject">uni.previewImage(OBJECT)</h2>
<p>预览图片。</p>
<p><strong>OBJECT 参数说明</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">参数名</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">必填</th>
<th style="text-align: left">说明</th>
<th style="text-align: left">平台差异说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">current</td>
<td style="text-align: left">String/Number</td>
<td style="text-align: left">详见下方说明</td>
<td style="text-align: left">详见下方说明</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">urls</td>
<td style="text-align: left">Array<string></string></td>
<td style="text-align: left">是</td>
<td style="text-align: left">需要预览的图片链接列表</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">indicator</td>
<td style="text-align: left">String</td>
<td style="text-align: left">否</td>
<td style="text-align: left">图片指示器样式，可取值："default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器。</td>
<td style="text-align: left">App</td>
</tr>
<tr>
<td style="text-align: left">loop</td>
<td style="text-align: left">Boolean</td>
<td style="text-align: left">否</td>
<td style="text-align: left">是否可循环预览，默认值为 false</td>
<td style="text-align: left">App</td>
</tr>
<tr>
<td style="text-align: left">longPressActions</td>
<td style="text-align: left">Object</td>
<td style="text-align: left">否</td>
<td style="text-align: left">长按图片显示操作菜单，如不填默认为<strong>保存相册</strong></td>
<td style="text-align: left">App 1.9.5+</td>
</tr>
<tr>
<td style="text-align: left">success</td>
<td style="text-align: left">Function</td>
<td style="text-align: left">否</td>
<td style="text-align: left">接口调用成功的回调函数</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">fail</td>
<td style="text-align: left">Function</td>
<td style="text-align: left">否</td>
<td style="text-align: left">接口调用失败的回调函数</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">complete</td>
<td style="text-align: left">Function</td>
<td style="text-align: left">否</td>
<td style="text-align: left">接口调用结束的回调函数（调用成功、失败都会执行）</td>
<td style="text-align: left"></td>
</tr>
</tbody>
</table>
<p><strong>current 参数说明</strong></p>
<blockquote>
<p>1.9.5+ 支持传图片在 urls 中的索引值</p>
</blockquote>
<p>current 为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张。<strong>App平台在 1.9.5至1.9.8之间，current为必填。不填会报错</strong></p>
<p>注意，当 urls 中有重复的图片链接时：</p>
<ul>
<li>传链接，预览结果始终显示该链接在 urls 中第一次出现的位置。</li>
<li>传索引值，在微信/百度/字节跳动小程序平台，会过滤掉传入的 urls 中该索引值之前与其对应图片链接重复的值。其它平台会保留原始的 urls 不会做去重处理。</li>
</ul>
<p>举例说明：</p>
<p>一组图片 <code></code>，其中 B1 与 B2 的图片链接是一样的。</p>
<ul>
<li>传 B2 的链接，预览的结果是 B1，前一张是 A，下一张是 C。</li>
<li>传 B2 的索引值 3，预览的结果是 B2，前一张是 C，下一张是 D。此时在微信/百度/字节跳动小程序平台，最终传入的 urls 是 <code></code>，过滤掉了与 B2 重复的 B1。</li>
</ul>
<p><strong>longPressActions 参数说明</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">参数</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">必填</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">itemList</td>
<td style="text-align: left">Array<string></string></td>
<td style="text-align: left">是</td>
<td style="text-align: left">按钮的文字数组</td>
</tr>
<tr>
<td style="text-align: left">itemColor</td>
<td style="text-align: left">String</td>
<td style="text-align: left">否</td>
<td style="text-align: left">按钮的文字颜色，字符串格式，默认为"#000000"</td>
</tr>
<tr>
<td style="text-align: left">success</td>
<td style="text-align: left">Function</td>
<td style="text-align: left">否</td>
<td style="text-align: left">接口调用成功的回调函数，详见返回参数说明</td>
</tr>
<tr>
<td style="text-align: left">fail</td>
<td style="text-align: left">Function</td>
<td style="text-align: left">否</td>
<td style="text-align: left">接口调用失败的回调函数</td>
</tr>
<tr>
<td style="text-align: left">complete</td>
<td style="text-align: left">Function</td>
<td style="text-align: left">否</td>
<td style="text-align: left">接口调用结束的回调函数（调用成功、失败都会执行）</td>
</tr>
</tbody>
</table>
<p><strong>success 返回参数说明</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">参数</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">index</td>
<td style="text-align: left">Number</td>
<td style="text-align: left">用户长按图片的索引值</td>
</tr>
<tr>
<td style="text-align: left">tapIndex</td>
<td style="text-align: left">Number</td>
<td style="text-align: left">用户点击按钮列表的索引值</td>
</tr>
</tbody>
</table>
<p><strong>示例</strong></p>
<pre><code class="language-javascript">// 从相册选择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);
                }
            }
      });
    }
    });
</code></pre>
<p><strong>TIPS</strong></p>
<ul>
<li>在非H5端，previewImage是原生实现的，界面自定义灵活度较低。</li>
<li>插件市场有前端实现的previewImage，性能低于原生实现，但界面可随意定义；插件市场也有适于App端的previewImage原生插件，提供了更多功能。</li>
</ul>
<h2 id="unigetimageinfoobject">uni.getImageInfo(OBJECT)</h2>
<p>获取图片信息。</p>
<p>小程序下获取网络图片信息需先配置download域名白名单才能生效。</p>
<p><strong>平台差异说明</strong></p>
<table>
<thead>
<tr>
<th style="text-align: center">App</th>
<th style="text-align: center">H5</th>
<th style="text-align: center">微信小程序</th>
<th style="text-align: center">支付宝小程序</th>
<th style="text-align: center">百度小程序</th>
<th style="text-align: center">字节跳动小程序</th>
<th style="text-align: center">QQ小程序</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center">√</td>
<td style="text-align: center">√</td>
<td style="text-align: center">√</td>
<td style="text-align: center">√</td>
<td style="text-align: center">√</td>
<td style="text-align: center">√</td>
<td style="text-align: center">√</td>
</tr>
</tbody>
</table>
<p><strong>OBJECT 参数说明</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">参数名</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">必填</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">src</td>
<td style="text-align: left">String</td>
<td style="text-align: left">是</td>
<td style="text-align: left">图片的路径，可以是相对路径，临时文件路径，存储文件路径，网络图片路径</td>
</tr>
<tr>
<td style="text-align: left">success</td>
<td style="text-align: left">Function</td>
<td style="text-align: left">否</td>
<td style="text-align: left">接口调用成功的回调函数</td>
</tr>
<tr>
<td style="text-align: left">fail</td>
<td style="text-align: left">Function</td>
<td style="text-align: left">否</td>
<td style="text-align: left">接口调用失败的回调函数</td>
</tr>
<tr>
<td style="text-align: left">complete</td>
<td style="text-align: left">Function</td>
<td style="text-align: left">否</td>
<td style="text-align: left">接口调用结束的回调函数（调用成功、失败都会执行）</td>
</tr>
</tbody>
</table>
<p><strong>success 返回参数说明</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">参数名</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">说明</th>
<th style="text-align: left">平台差异说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">width</td>
<td style="text-align: left">Number</td>
<td style="text-align: left">图片宽度，单位px</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">height</td>
<td style="text-align: left">Number</td>
<td style="text-align: left">图片高度，单位px</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">path</td>
<td style="text-align: left">String</td>
<td style="text-align: left">返回图片的本地路径</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">orientation</td>
<td style="text-align: left">String</td>
<td style="text-align: left">返回图片的方向，有效值见下表</td>
<td style="text-align: left">App、小程序</td>
</tr>
<tr>
<td style="text-align: left">type</td>
<td style="text-align: left">String</td>
<td style="text-align: left">返回图片的格式</td>
<td style="text-align: left">App、小程序</td>
</tr>
</tbody>
</table>
<p><strong>orientation 参数说明</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">枚举值</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">up</td>
<td style="text-align: left">默认</td>
</tr>
<tr>
<td style="text-align: left">down</td>
<td style="text-align: left">180度旋转</td>
</tr>
<tr>
<td style="text-align: left">left</td>
<td style="text-align: left">逆时针旋转90度</td>
</tr>
<tr>
<td style="text-align: left">right</td>
<td style="text-align: left">顺时针旋转90度</td>
</tr>
<tr>
<td style="text-align: left">up-mirrored</td>
<td style="text-align: left">同up，但水平翻转</td>
</tr>
<tr>
<td style="text-align: left">down-mirrored</td>
<td style="text-align: left">同down，但水平翻转</td>
</tr>
<tr>
<td style="text-align: left">left-mirrored</td>
<td style="text-align: left">同left，但垂直翻转</td>
</tr>
<tr>
<td style="text-align: left">right-mirrored</td>
<td style="text-align: left">同right，但垂直翻转</td>
</tr>
</tbody>
</table>
<p><strong>示例</strong></p>
<pre><code class="language-javascript">uni.chooseImage({
    count: 1,
    sourceType: ['album'],
    success: function (res) {
      uni.getImageInfo({
            src: res.tempFilePaths,
            success: function (image) {
                console.log(image.width);
                console.log(image.height);
            }
      });
    }
});
</code></pre>
<h2 id="unisaveimagetophotosalbumobject">uni.saveImageToPhotosAlbum(OBJECT)</h2>
<p>保存图片到系统相册。</p>
<p><strong>平台差异说明</strong></p>
<table>
<thead>
<tr>
<th style="text-align: center">App</th>
<th style="text-align: center">H5</th>
<th style="text-align: center">微信小程序</th>
<th style="text-align: center">支付宝小程序</th>
<th style="text-align: center">百度小程序</th>
<th style="text-align: center">字节跳动小程序</th>
<th style="text-align: center">QQ小程序</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center">√</td>
<td style="text-align: center">x</td>
<td style="text-align: center">√</td>
<td style="text-align: center">√</td>
<td style="text-align: center">√</td>
<td style="text-align: center">√</td>
<td style="text-align: center">√</td>
</tr>
</tbody>
</table>
<p><strong>OBJECT 参数说明</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">参数名</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">必填</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">filePath</td>
<td style="text-align: left">String</td>
<td style="text-align: left">是</td>
<td style="text-align: left">图片文件路径，可以是临时文件路径也可以是永久文件路径，不支持网络图片路径</td>
</tr>
<tr>
<td style="text-align: left">success</td>
<td style="text-align: left">Function</td>
<td style="text-align: left">否</td>
<td style="text-align: left">接口调用成功的回调函数</td>
</tr>
<tr>
<td style="text-align: left">fail</td>
<td style="text-align: left">Function</td>
<td style="text-align: left">否</td>
<td style="text-align: left">接口调用失败的回调函数</td>
</tr>
<tr>
<td style="text-align: left">complete</td>
<td style="text-align: left">Function</td>
<td style="text-align: left">否</td>
<td style="text-align: left">接口调用结束的回调函数（调用成功、失败都会执行）</td>
</tr>
</tbody>
</table>
<p><strong>success 返回参数说明</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">参数名</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">path</td>
<td style="text-align: left">String</td>
<td style="text-align: left">保存到相册的图片路径，仅 App 3.0.5+ 支持</td>
</tr>
<tr>
<td style="text-align: left">errMsg</td>
<td style="text-align: left">String</td>
<td style="text-align: left">调用结果</td>
</tr>
</tbody>
</table>
<p><strong>注意</strong></p>
<ul>
<li>可以通过用户授权API来判断用户是否给应用授予相册的访问权限https://uniapp.dcloud.io/api/other/authorize</li>
<li>H5没有API可触发保存到相册行为，下载图片时浏览器会询问图片存放地址。</li>
</ul>
<p><strong>示例代码：</strong></p>
<pre><code class="language-javascript">uni.chooseImage({
    count: 1,
    sourceType: ['camera'],
    success: function (res) {
      uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePaths,
            success: function () {
                console.log('save success');
            }
      });
    }
});
</code></pre>
<h2 id="unicompressimageobject">uni.compressImage(OBJECT)</h2>
<p>压缩图片接口，可选压缩质量</p>
<p><strong>平台差异说明</strong></p>
<table>
<thead>
<tr>
<th style="text-align: center">App</th>
<th style="text-align: center">H5</th>
<th style="text-align: center">微信小程序</th>
<th style="text-align: center">支付宝小程序</th>
<th style="text-align: center">百度小程序</th>
<th style="text-align: center">字节跳动小程序</th>
<th style="text-align: center">QQ小程序</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center">√</td>
<td style="text-align: center">x</td>
<td style="text-align: center">√</td>
<td style="text-align: center">√</td>
<td style="text-align: center">√(基础库版本&gt;=3.110.3)</td>
<td style="text-align: center">√</td>
<td style="text-align: center">√</td>
</tr>
</tbody>
</table>
<p><strong>OBJECT 参数说明</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">默认值</th>
<th style="text-align: left">必填</th>
<th style="text-align: left">说明</th>
<th style="text-align: left">平台差异说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">src</td>
<td style="text-align: left">String</td>
<td style="text-align: left"></td>
<td style="text-align: left">是</td>
<td style="text-align: left">图片路径，图片的路径，可以是相对路径、临时文件路径、存储文件路径</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">quality</td>
<td style="text-align: left">Number</td>
<td style="text-align: left">80</td>
<td style="text-align: left">否</td>
<td style="text-align: left">压缩质量，范围0～100，数值越小，质量越低，压缩率越高（仅对jpg有效）</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">width</td>
<td style="text-align: left">String</td>
<td style="text-align: left">auto</td>
<td style="text-align: left">否</td>
<td style="text-align: left">缩放图片的宽度，支持像素值（如"100px"）、百分比（如"50%"）、自动计算（如"auto"，即根据height与源图高的缩放比例计算，若未设置height则使用源图高度）</td>
<td style="text-align: left">App 3.0.0+</td>
</tr>
<tr>
<td style="text-align: left">height</td>
<td style="text-align: left">String</td>
<td style="text-align: left">auto</td>
<td style="text-align: left">否</td>
<td style="text-align: left">缩放图片的高度，支持像素值（如"100px"）、百分比（如"50%"）、自动计算（如"auto"，即根据height与源图高的缩放比例计算，若未设置height则使用源图高度）</td>
<td style="text-align: left">App 3.0.0+</td>
</tr>
<tr>
<td style="text-align: left">success</td>
<td style="text-align: left">Function</td>
<td style="text-align: left"></td>
<td style="text-align: left">否</td>
<td style="text-align: left">接口调用成功的回调函数</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">fail</td>
<td style="text-align: left">Function</td>
<td style="text-align: left"></td>
<td style="text-align: left">否</td>
<td style="text-align: left">接口调用失败的回调函数</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">complete</td>
<td style="text-align: left">Function</td>
<td style="text-align: left"></td>
<td style="text-align: left">否</td>
<td style="text-align: left">接口调用结束的回调函数（调用成功、失败都会执行）</td>
<td style="text-align: left"></td>
</tr>
</tbody>
</table>
<p><strong>success 返回参数说明</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">tempFilePath</td>
<td style="text-align: left">String</td>
<td style="text-align: left">压缩后图片的临时文件路径</td>
</tr>
</tbody>
</table>
<p><strong>示例代码：</strong></p>
<pre><code class="language-js">uni.compressImage({
src: '/static/logo.jpg',
quality: 80,
success: res =&gt; {
    console.log(res.tempFilePath)
}
})
</code></pre>
<h2 id="例选择本地的图片并预览">例：选择本地的图片并预览</h2>
<pre><code>&lt;template&gt;
        &lt;view&gt;
                &lt;button type="primary" @click="chooseImg"&gt;打开图片&lt;/button&gt;
                &lt;image v-for="item in imgArr" :src="item" @click="previewImg(item)"&gt;&lt;/image&gt;
        &lt;/view&gt;
&lt;/template&gt;

&lt;script&gt;
        export default {
                data() {
                        return {
                                imgArr: []
                        }
                },
                methods: {
                        chooseImg() {
                                //选择图片
                                uni.chooseImage({
                                        count: 5,
                                        success: res =&gt; {
                                                this.imgArr = res.tempFilePaths
                                        }
                                })
                        },

                        previewImg(current) {
                                //预览图片
                                uni.previewImage({
                                        current,
                                        urls: this.imgArr,
                                        loop: true,
                                        indicator: 'default'
                                })
                        }
                },

        }
&lt;/script&gt;
&lt;style&gt;
&lt;/style&gt;
</code></pre>
<p>效果</p>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210317152830638-1001319837.png" alt="image-20210317152638468" loading="lazy"></p>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210317152830640-662350073.png" alt="image-20210317152701345" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/makalochen/p/14549631.html

查看完整版本: uni-app 媒体之图片的使用