直播软件搭建，uniapp 之使用 u-upload 组件来实现图片上传

时间：2023-01-06 01:00:59

直播软件搭建，uniapp 之使用 u-upload 组件来实现图片上传

一、官方示例用法

uview 1.0 u-upload 官方文档

<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: '
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"

绑定选择完成后的回调函数,并在回调函数当中使用手动上传 @>


二、关闭自动上传,使用手动上传的方式,代码

html 代码

<template>
<u-form :model="deviceInfo" ref="uForm">
<view>
<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">
<view slot="addBtn" 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: '
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 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>


 以上就是直播软件搭建，uniapp 之使用 u-upload 组件来实现图片上传， 更多内容欢迎关注之后的文章


相关文章