直播軟體搭建，uniapp 之使用 u-upload 元件來實現圖片上傳

直播軟體搭建，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 元件來實現圖片上傳， 更多內容歡迎關注之後的文章