uniapp 之使用 u-upload 组件来实现图片上传
Posted YZRHANYU
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了uniapp 之使用 u-upload 组件来实现图片上传相关的知识，希望对你有一定的参考价值。
uniapp 之使用 u-upload 组件来实现图片上传
前言
在使用 uniapp 开发的微信小程序中使用了图片上传功能,使用了 uniapp 的图片上传组件
注意：我这里后端接口接收类型为form-data，参数名为files
一、官方示例用法
<template>
<view>
<u-upload ref="uUpload" :action="action" :auto-upload="true" ></u-upload>
<u-button @click="submit">提交</u-button>
</view>
</template>
<script>
export default
data()
return
action: 'http://www.example.com/upload',
filesArr: []
,
methods:
submit()
let files = [];
// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
files = this.$refs.uUpload.lists.filter(val =>
return val.progress == 100;
)
// 如果您不需要进行太多的处理，直接如下即可
// files = this.$refs.uUpload.lists;
console.log(files)
</script>
分析
首先可以看到 <u-upload ref="uUpload" :action="action" :auto-upload="true" > 这里的 :auto-upload="true" ,这里是设置文件选中后自动上传,且上传路径为 data 当中定义的 action ,但是这里使用自动上传的时候,只能设置上传的 url 地址,如果业务当中有其他需求,比如请求头中需要携带 token … 将无法满足
因此可以选择将自动上传关掉 :auto-upload="false"
绑定选择完成后的回调函数,并在回调函数当中使用手动上传 @on-choose-complete="onChooseComplete"
二、关闭自动上传,使用手动上传的方式,代码
html 代码
<template>
<u-form :model="deviceInfo" ref="uForm">
<view class="top">
<u-form-item prop="imgUrl" label-width="10" :border-bottom='false'>
<u-upload @on-choose-complete="onChooseComplete" ref="uUpload" :custom-btn="true"
:show-upload-list="true" :auto-upload="false" :file-list="fileList" :show-progress="true"
:deletable="true" max-count="1" class="test2">
<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
<image src="../static/img/addDevice.jpg" mode="aspectFill"></image>
</view>
</u-upload>
</u-form-item>
</view>
</u-form>
</template>
js 代码
<script>
// 这里引入的 Config 中配置了整个项目的接口地址
import Config from '@/core/config'
// 这里引入 store 是为了获取 token
import store from '@/store/index.js';
// 后端api地址
const uploadUrl = Config.get('apiUrl') + 'admin-api/infra/file/upload';
export default
data()
return
// 预置上传列表
fileList: [],
deviceInfo:
photoUrl: '',
,
methods:
onChooseComplete(lists, name)
const app = this;
uni.uploadFile(
// 这里是你上传图片的地址
// url: 'https://xxx.xx.xx.xx/admin-api/infra/file/upload',
url: uploadUrl,
filePath: lists[0].url,
name: 'file',
header:
"Authorization": `Bearer $store.getters.token`
,
// 这个res是后端返回给你上传成功的数据里边一般会有上传之后图片的在线路径
success: (res) =>
app.deviceInfo.photoUrl = JSON.parse(res.data).data;
console.log(JSON.parse(res.data).data)
,
)
,
</script>
css 代码
<style lang="scss" scoped>
.top
width: 224rpx;
height: 224rpx;
margin: 0 auto;
margin-bottom: 50rpx;
margin-top: 50rpx;
image
width: 224rpx;
height: 224rpx;
border-radius: 50%;
.tips
font-size: 28rpx;
color: $u-type-primary;
</style>
当前实现的效果
总结分析
当前项目中提供的上传图片需要携带 token
所以采用了 uni.uploadFile 来上传文件,这里要求参数 url 在app 端写全(携带 http / https )
uni.uploadFile 是无法被统一的请求拦截器拦截到的,如果需要携带请求头,需要自己在 uni.uploadFile 中进行配置,
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
uniapp小程序开发—— 组件封装之自定义轮播图
文章目录
🍋前言：
本文主要展示小程序端封装轮播图组件，使用的是uniapp进行的开发，主要使用的是uniapp官网提供的
swiper组件,可以参考官方文档，查看一些相关API。效果图一睹为快：
话不多说直接上正文一起来学习一下封装轮播图组件吧！
🍍正文
1、首先了解swiper组件
滑块视图容器。
一般用于左右滑动或上下滑动，比如banner轮播图。
注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。
swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。
1.1、小小的demo示例：
<template>
<view class="uni-margin-wrap">
<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000"
:duration="500">
<swiper-item>
<view class="swiper-item uni-bg-red">A</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-green">B</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-blue">C</view>
</swiper-item>
</swiper>
</view>
</template>
<style>
.uni-margin-wrap
width: 690rpx;
width: 100%;
.swiper
height: 300rpx;
.swiper-item
display: block;
height: 300rpx;
line-height: 300rpx;
text-align: center;
</style>
效果图如下：
1.2、自定义轮播图效果展示说明
我们要做的是：
轮播图底部颜色渐变
左下方包含对应图片的一行文字说明
指示点在右下方，选中颜色为白色，未选中为灰色
效果图如下：
2、完成自定义轮播图效果
我们先完成效果再去探讨如何封装成组件。如下示例代码展示了自定义轮播图的效果：
swiper常用属性介绍：
indicator-dots：轮播图正前方的小圆点(此案例没有使用官方提供的，是自定义的在右下角附近)autoplay：是否自动切换interval：图片轮播间隔此处为3秒duration：图片轮播动画时长 此处为0.5秒circular：是否开启无缝轮播（此处为到第三张图片后无缝播放第一张图片）
<template>
<!-- 轮播图组件 -->
<view class="px-3 py-2 ">
<view class="position-relative">
<swiper :autoplay="true" :interval="3000" :duration="500" circular style="height: 250rpx;"
@change="changeIndicatorDots">
<swiper-item v-for="(item,index) in swipers" :key="index">
<image :src="item.src" mode="sapectFill" style="height:250rpx;width: 100%;" class="rounded-lg">
</image>
</swiper-item>
</swiper>
<view class="flex align-center text-white rounded-bottom-lg px-2 pb-1" style="position: absolute; bottom: 0; left: 0; right: 0;
background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.8));">
<view style="width: 80%;" class="text-ellipsis">
<!-- 获取当前指示点的位置，获取对应的title -->
<text>swipers[current].title</text>
</view>
<view style="width: 20%;" class="flex align-center justify-end flex-shrink">
<!-- 指示点选中当前图片为白色 未选中为灰色 -->
<view v-for="(item,index) in swipers" :key="index" style="height: 16rpx;width: 16rpx ; "
class="rounded-circle ml-1"
:style="index===current?'background-color:rgba(255,255,255,1)':'background-color:rgba(255,255,255,0.5)'">
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default
data()
return
current: 0, // 标识当前选中的图片序列号
swipers: [
src: '/static/swiper/1.jpg',
title: '自定义轮播图组件图片一'
,
src: '/static/swiper/2.jpg',
title: '自定义轮播图组件图片二名字很长测试用'
,
src: '/static/swiper/3.jpg',
title: '自定义轮播图组件图片三'
]
,
onLoad()
,
methods:
// changeIndicatorDots方法会在轮播的图片切换后调用，e.detail.current表示当前所在滑块的 index
changeIndicatorDots(e)
this.current = e.detail.current
</script>
示例代码中的class类中的类名样式是我已经在全局配置好的，由于篇幅比较长，之后的小程序文章也会经常使用，我已经上传到了CSDN资源（免费），点击链接跳转下载可查看相对应的样式。
3、组件封装——自定义轮播图
3.1、创建swiper-doc.vue组件
3.2、组件调用，封装完成
首先我们要清楚，我们封装的内容为我们自定义的部分，swiper滑块区域是不需要封装的是通用的，我们使用插槽站位。我们只需要将我们自定义的指示点、介绍文字、渐变模块封装即可。
示例代码如下：
swiper-doc.vue文件：
<template>
<view class="position-relative">
<!-- 轮播图组件不需要直接使用插槽 -->
<slot></slot>
<view class="flex align-center text-white rounded-bottom-lg px-2 pb-1" style="position: absolute; bottom: 0; left: 0; right: 0;
background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.8));">
<view style="width: 80%;" class="text-ellipsis">
<!-- 获取当前指示点的位置，获取对应的title -->
<text>info[current].title</text>
</view>
<view style="width: 20%;" class="flex align-center justify-end flex-shrink">
<!-- 指示点选中当前图片为白色 未选中为灰色 -->
<view v-for="(item,index) in info" :key="index" style="height: 16rpx;width: 16rpx ; "
class="rounded-circle ml-1"
:style="index===current?'background-color:rgba(255,255,255,1)':'background-color:rgba(255,255,255,0.5)'">
</view>
</view>
</view>
</view>
</template>
<script>
export default
props:
info:Array,
current:
type:Number,
default:0
</script>
info表示我们所需的轮播图片数据；
current表示那个轮播图片的索引，用于获取title和指示点。
index.vue文件：
<view class="px-3 py-2 ">
<swiperDot class="position-relative" :current="current" :info="swipers">
<!--
swiper常用属性介绍：
indicator-dots:轮播图正前方的小圆点(此案例没有使用官方提供的，是自定义的在右下角附近)
autoplay：是否自动切换
interval：图片轮播间隔此处为3秒
duration：图片轮播动画时长 此处为0.5秒
circular：是否开启无缝轮播（此处为到第三张图片后无缝播放第一张图片）
-->
<swiper :autoplay="true" :interval="3000" :duration="500" circular style="height: 250rpx;"
@change="changeIndicatorDots">
<swiper-item v-for="(item,index) in swipers" :key="index">
<image :src="item.src" mode="sapectFill" style="height:250rpx;width: 100%;" class="rounded-lg">
</image>
</swiper-item>
</swiper>
</swiperDot>
</view>
<script>
// 引入指示点组件，注册并使用
import swiperDot from '@/components/comon/swiper-doc.vue'
export default
components:
swiperDot
,
data()
return
current: 0, // 标识当前选中的图片序列号
swipers: [
src: '/static/swiper/1.jpg',
title: '自定义轮播图组件图片一'
,
src: '/static/swiper/2.jpg',
title: '自定义轮播图组件图片二名字很长测试用'
,
src: '/static/swiper/3.jpg',
title: '自定义轮播图组件图片三'
]
,
onLoad()
,
methods:
// changeIndicatorDots方法会在轮播的图片切换后调用，e.detail.current表示当前所在滑块的 index
changeIndicatorDots(e)
this.current = e.detail.current
</script>
注意：文章案例中的swipers数组在实际开发中应该是从后端获取的，我们这里是自己直接定义的。
🎃专栏分享：
小程序项目实战专栏：《uniapp小程序开发》
前端面试专栏地址：《面试必看》
⏳ 名言警句：说能做的，做说过的 \\textcolorred 名言警句：说能做的，做说过的 名言警句：说能做的，做说过的
✨ 原创不易，还希望各位大佬支持一下 \\textcolorblue原创不易，还希望各位大佬支持一下 原创不易，还希望各位大佬支持一下
👍 点赞，你的认可是我创作的动力！ \\textcolorgreen点赞，你的认可是我创作的动力！ 点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！ \\textcolorgreen收藏，你的青睐是我努力的方向！ 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！ \\textcolorgreen评论，你的意见是我进步的财富！ 评论，你的意见是我进步的财富！
以上是关于uniapp 之使用 u-upload 组件来实现图片上传的主要内容，如果未能解决你的问题，请参考以下文章