最近本人在开发时uniapp小程序需要使用uploader组件,但是老是遇到一些奇怪的坑,于是就写了个原生分享一下
uploader组件是我们经常用到的来看下如何使用吧:
一、准备一张带上传符号的图片
二、给图片所有写点样式
<view class="uploader-warpper">
<image
src="../../static/image/uploadImage.png" //这里是图片地址
></image>
</view>
.uploader-warpper {
image {
width: 180rpx;
height: 180rpx;
}
}
复制代码
三、使用uni.chooseImage和uni.uploadFile实现图片的上传功能
uni.chooseImage可以从本地或相机中选择图片上传
文档:uniapp.dcloud.io/api/media/i…
uni.uploadFile用于文件上传
文档:uniapp.dcloud.io/api/request…
四、使用uni.previewImage做文件预览
uni.previewImage用于图片预览
文档:uniapp.dcloud.io/api/media/i…
全部代码
<view class="uploader-warpper">
<block v-for="(val, ind) in showPic"> //val是文件对象,内有url和index两个值
<image
:key="val.url"
:src="val.url"
v-show="index === val.index" //index是外部data的v-for带的
@tap="handleImagePre(val)"
></image>
</block>
<image
src="../../static/image/uploadImage.png" //这里是图片地址
@tap="handleUpLoadTap(index)" //index来自v-for中作为标识记录哪个图片被点击你也可用id啥的
></image>
</view>
handleUpLoadTap(index){
this.remark = index //记录标识
uni.chooseImage({
count: 1, //默认9
sizeType: ["compressed"], //可以指定是原图还是压缩图,默认二者都有
sourceType: ["camera", "album"], //从相册选择
success: (res) => {
this.upload(res.tempFilePaths[0]); //此处获得一个临时url
},
});
}
upload(url){
uni.uploadFile({
url: 'https://www.example.com/upload', //改成你要传的地址,这里只是示例地址
filePath: url,
name: 'file', //文件对应的key
formData: { 'user': 'test' }, //HTTP 请求中其他额外的 form data |
success: (uploadFileRes) => {
//这部分看你和后端的约定主要是拿到图片返回的URL并将文件对象push进一个数组里
let parseData = JSON.parse(res.data); //转换后端数据
if (parseData.success) {
let url = configService.apiUrl + parseData.data;
this.data.forEach((item, index) => { //data用来循环渲染
if (index == this.remark) { //通过标识找到点击的那行数据
//showPic是个数组用来保存文件对象,index是文件的标识用来记录图片属于哪一行
this.showPic.push({ url, index });
//showAddButton控制上传符号图片是否展示
item.showAddButton = false;
}
});
}
}
});
fail: res => uni.showToast({title:res.msg, icon: 'none'}) //上传失败展示原因
}
handleImagePre(val) {
uni.previewImage({
current: 1, // 传 Number H5端出现不兼容
urls: [val.url],
});
},
.uploader-warpper {
image {
width: 180rpx;
height: 180rpx;
}
}
复制代码
除了基础的文件选择上传预览图片之外,还有删除,loading等功能也是比较好实现的,这里就不一一讲解了~