直播軟體搭建,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 元件來實現圖片上傳, 更多內容歡迎關注之後的文章
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69978258/viewspace-2940262/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 直播帶貨軟體開發過程中,如何實現圖片上傳
- Vue +Element Ui 使用Upload元件實現多圖片上傳VueUI元件
- 如何在直播軟體搭建中,實現圖片瀑布流效果?
- Java實現圖片上傳到伺服器,並把上傳的圖片讀取出來Java伺服器
- 用Vue來實現圖片上傳多種方式Vue
- 直播平臺搭建,實現圖片縮圖功能
- vue 實現貼上上傳圖片Vue
- 線上直播系統原始碼,Node.js中使用Koa實現上傳圖片功能原始碼Node.js
- formData原生實現圖片上傳ORM
- Vue圖片裁剪上傳元件Vue元件
- 直播軟體原始碼,uniapp捲軸置頂實現原始碼APP
- 直播軟體搭建,css實現多張圖片或logo左右無間隙滾動CSSGo
- 使用Vue實現圖片上傳的三種方式Vue
- FileReader初步使用實現上傳圖片預覽效果
- 直播平臺軟體開發,input限制上傳數量,規定圖片上傳數量
- 分享一個看起來很酷的圖片上傳元件元件
- uniapp小程式上傳圖片到騰訊雲APP
- PHP實現圖片(檔案)上傳PHP
- uniapp uview 上傳圖片,資料以formData + File 形式傳輸APPViewORM
- Uniapp開發微信小程式+Node ---- 圖片上傳APP微信小程式
- 直播平臺原始碼,上傳本地圖片實現個人名片背景圖輪播原始碼地圖
- node+express實現圖片上傳功能Express
- layui中實現上傳圖片壓縮UI
- 通過API介面實現圖片上傳API
- app直播原始碼,js實現上傳圖片型別+大小+尺寸驗證APP原始碼JS型別
- 搭建直播平臺,uniapp捲軸置頂實現APP
- React圖片上傳元件react-fileupload的使用方法React元件
- SpringMVC實現ajax上傳圖片實時預覽SpringMVC
- 直播軟體原始碼,CSS3實現圖片立體旋轉動畫原始碼CSSS3動畫
- Laravel 使用 FastDFS 上傳圖片LaravelAST
- element-ui+Vue實現的圖片上傳UIVue
- django 實現圖片上傳和顯示操作Django
- 使用 HTML5 Canvas 實現圓形圖片裁剪並上傳HTMLCanvas
- 前端丨如何使用 tcb-js-sdk 實現圖片上傳功能前端JS
- element上傳圖片元件使用方法|圖片回顯|格式轉換base64元件
- laravel之標準上傳圖片Laravel
- .Net之Layui多圖片上傳UI
- AntD框架的upload元件上傳圖片時使用customRequest方法自定義上傳行為框架元件