目录
目录
前言正文
1、首先看官网
2、案例代码演示
3、效果展示
前言
本篇文章我们研究一下，在移动端开发过程中经常使用到的图片上传功能。在大多数小程序或者APP中都会遇到一些实名认证或者头像上传的功能。uniapp官方也提供了相应的API供我们使用。
官网地址：uni.chooseImage(OBJECT)
正文
1、首先看官网
uni.chooseImage(OBJECT) API 介绍
从本地相册选择图片或使用相机拍照。
App端如需要更丰富的相机拍照API（如直接调用前置摄像头），参考plus.camera
微信小程序从基础库 2.21.0 开始， wx.chooseImage 停止维护，请使用 uni.chooseMedia 代替。
OBJECT 参数说明
crop 参数说明
Tips
count 值在 H5 平台的表现，基于浏览器本身的规范。目前测试的结果来看，只能限制单选/多选，并不能限制数量。并且，在实际的手机浏览器很少有能够支持多选的。sourceType 值在 H5 平台根据浏览器的不同而表现不同，一般不可限制仅使用相册，部分浏览器也无法限制是否使用相机。
可以通过用户授权API来判断用户是否给应用授予相册或摄像头的访问权限https://uniapp.dcloud.io/api/other/authorize`
App端如需选择非媒体文件，可在插件市场搜索文件选择，其中android端可以使用Native.js，无需原生插件，而IOS端需要原生插件。
选择照片大多为了上传，uni ui封装了更完善的uni-file-picker组件，文件选择、上传到uniCloud的免费存储和cdn中，一站式集成。强烈推荐使用。
注：文件的临时路径，在应用本次启动期间可以正常使用，如需持久保存，需在主动调用 uni.saveFile，在应用下次启动时才能访问得到。
success 返回参数说明
File 对象结构如下
示例
uni.chooseImage({
count: 6, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], //从相册选择
success: function (res) {
console.log(JSON.stringify(res.tempFilePaths));
}
});
这里给大家说个大坑：
chooseImage这个方法的成功回调函数，success 必须使用ES6 的箭头函数，否则this的作用域是当前函数，就获取不到data方法中的自己定义的变量。如果不理解的话，请看下面案例展示内容。ES6 箭头函数官方描述：对于普通函数来说，内部的this指向函数运行时所在的对象，但是这一点对箭头函数不成立。它没有自己的this对象，内部的this就是定义时上层作用域中的this。也就是说，箭头函数内部的this指向是固定的，相比之下，普通函数的this指向是可变的。
2、案例代码演示
看了官网的案例 我们也来自己动手写一写。
本案例操作描述：默认显示添加封面按钮，点击调用本地图片选择上传一张作为封面使用，可进行切换。(忽略项目中比较丑陋的字体颜色，只做案例展示使用，与本人审美无关(狗头))参数设置我在代码中都做了详细的解释，没有写的参数使用官网的默认值。成功的回调函数success写了一种 ES5 的形式，写了一种 ES6 的形式供大家参考。封面图片的src是用了动态赋值的方式(:src="cover")。
<template>
<view>
<view class="add-cover" @click="upload">
<!-- 这里使用 :src="cover" 将src动态赋值-->
<image class="cover" :src="cover" mode="ASPectFill"></image>
<view class="default">
<image src="../../../static/add.png" class="add-icon"></image>
<!-- 没有上传图片时状态是添加，上传版完毕是切换 -->
<text>点击{{cover?'切换':'添加'}}封面</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
cover: ''
};
},
methods: {
// 方式一：使用箭头函数
upload() {
uni.chooseImage({
count: 1, //默认9,这里设置只允许选择一张图片
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], //这里选择从相册选择，也可删除此项设置默认拍照和相册两种选择
success: res => {
// 实际开发中，成功的回调函数中是一个上传图片到服务器的接口，这里只是做了简单的效果，实际根据接口需要的参数格式进行上传
// console.log(JSON.stringify(res.tempFilePaths)); 打印的结果是以数组方式返回的，所以我们只需要取第一个值：["blob:http://localhost:8080/c18cded6-ab83-4d0e-9ccd-ce2e402b7d3f"]
this.cover = res.tempFilePaths[0] // 将选择的图片赋值给我们定义的cover
}
});
}
// 方式二：不使用箭头函数（不使用箭头函数就需要定义变量去赋值this,如下_this）
// upload() {
// var _this = this
// uni.chooseImage({
// count: 1, //默认9,这里设置只允许选择一张图片
// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
// sourceType: ['album'], //这里选择从相册选择，也可删除此项设置默认拍照和相册两种选择
// success: function(res) {
// _this.cover = res.tempFilePaths[0]
// }
// });
// }
}
}
</script>
<style lang="scss">
.cover {
width: 100%;
height: 350rpx;
}
.default {
background-color: #f8f9fc;
width: 100%;
height: 350rpx;
display: Flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: red;
font-weight: 800;
position: absolute;
top: 0;
background-color: rgba(255, 255, 255, 0.2);
}
.add-icon {
width: 50rpx;
height: 50rpx;
margin-bottom: 20rpx;
}
</style>
在此说明：本案例只做了本地上传图片的效果，没有调用接口上传到服务器，实际工作开发中是会有图片上传接口的，官网也提供了对应的将本地资源上传到开发者服务器API：uni.uploadFile(OBJECT)，大家可以去参考一下。如有实际开发接口问题可私信博主。
3、效果展示
到此这篇关于uniapp小程序上传图片的文章就介绍到这了,更多相关uniapp小程序 上传图片内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
