網站首頁 編程語言 正文
此處代碼只針對APP,如果要針對全端們可以參考這個。
https://ext.dcloud.net.cn/plugin?id=5459
同樣項目需求是這樣要求可以在APP上傳任意文件,沒法啊,硬著頭皮搞啊,插件市場找啊,哎~~沒一個滿足需求的。根據上個鏈接的啟發.自己寫一個,當然咱們項目是APP,所以只滿足了APP端。
重點
講一下幾個重點把。
webview
: 可以了解uniapp的webview和H5+的webview(我用的H5+)webview和uniapp的通信
: 如果不用通信可以不考慮這個。- ·
input type=file
: 包括css樣式,以及js的書寫(這個不難)。
思路
如果上面三個都有所了解,那么我簡單的講一下我的思路:
在
Vue
項目中(咱們有web端,所以有個項目)創建一個頁面,頁面的內容就是上傳文件。uniapp
利用webview
嵌套Vue
中的頁面,上傳文件之后,如果你需要做出一下交互,那么可以使用uniapp
和webview
的交互。
上代碼
vue
項目中的頁面代碼,就是一個上傳文件的代碼,需要多文件上傳就把multiple
加上,不要就不加。
如果需要給uniapp
通信,那么在Vue
項目中需要引入一個文件。這個文件必不可少,不然無法使用uniapp
中的一些方法。
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<template>
<div>
<--! HTML結構自己按照自己需求寫,只用關注input就行 -->
<div class="file">
<div>上傳</div>
<input @change="onChange" ref="file" class="file" type="file" multiple />
<div class="file-list">
<div class="file-one" v-for="(file, i) in filesList" :key="i">
<div>{{file.name}}</div>
<i class="el-icon-delete" @click.stop="handleDelete(file)"></i>
</div>
</div>
</div>
<div class="submit" @click="handleSubmit">確定</div>
</div>
</template>
<script>
export default {
data() {
return {
filesList: [],
info: '',
token: ''
};
},
created() {
// 這里是接收uniapp中傳遞過來的參數
let route = this.$route.query
//蘋果和安卓的接收參數有問題,這個根據自身需求改一下
if(route.isIos === 'true') {
let { data, token } = plus.webview.currentWebview();
this.info = data
this.token = token
localStorage['eleToken'] = token
console.log(data)
} else {
this.info = route.data
this.token = route.token
localStorage['eleToken'] = route.token
}
},
methods: {
// 上傳文件事件
onChange() {
console.log(this.$refs.file.files)
this.filesList.push(...this.$refs.file.files)
},
// 提交事件,根據自身需求寫
async handleSubmit() {
let formData = new FormData()
this.filesList.forEach(file => formData.append('Files', file));
formData.append('info', this.info)
try {
await this.$axios.post('/api/Techno/AddProgramme', formData)
// 這里項目需要給app通信,所以需要寫下面個
uni.webView.postMessage({
data: {
success: "success"
}
});
} catch(error) {
}
},
// 刪除文件
handleDelete(file) {
let i = this.filesList.findIndex(item => item === file)
this.filesList.splice(i, 1)
}
}
}
</script>
<style scoped>
// 樣式什么的可以參考一下,沒什么卵用
.file {
display: flex;
flex-direction: column;
width: 100%;
height: 114px;
font-size: 13px;
padding-left: 5px;
padding-top: 5px;
box-sizing: border-box;
}
.file input {
position: absolute;
opacity: 0;
top: 0;
z-index: 2;
width: 80%;
}
.file-list {
flex: 1;
padding-top: 10px;
overflow: auto;
}
.file-one {
display: flex;
justify-content: space-between;
height: 30px;
padding: 0 5px;
}
.file-one i {
font-size: 18px;
width: 10%;
}
.submit {
height: 40px;
width: 90vw;
background-color: #2979ff;
margin: 0 auto;
color: #fff;
line-height: 40px;
text-align: center;
border-radius: 8px;
}
</style>
uniapp
中的代碼。里面有幾個接口是什么意思自行查閱。
應該關注的就是plus.webview.create
方法,傳遞的參數什么的就自己理解,自己查閱資料。這里的代碼整體就是嵌套了Vue
中的那個頁面。
init() {
// #ifdef APP-PLUS
var _this = this
uni.getSystemInfo({
success: res => {
uni.createSelectorQuery().select("#file").boundingClientRect(son => {
var url = _this.webUrl + 'appfile'
var token = uni.getStorageSync('token');
if (res.platform == 'ios') {
url = url + '?isIos=true'
} else {
url = url +
`?isIos=false&token=${encodeURIComponent(token)}&data=${JSON.stringify(_this.formData)}`
}
console.log(url +
`?isIos=false&token=${encodeURIComponent(token)}&data=${JSON.stringify(_this.formData)}`)
var wv = plus.webview.create(url, 'lijin', {
top: son.top + son.height,
height: res.windowHeight - son.top - son.height + 200,
width: res.screenWidth,
position: "static" // 跟隨父頁面滾動
}, {
data: JSON.stringify(_this.formData),
token: uni.getStorageSync('token')
})
_this.wv = wv
var currentWebview = this.$scope.$getAppWebview() //獲取當前頁面的webview對象
currentWebview.append(wv); //一定要append到當前的頁面里!!!才能跟隨當前頁面一起做動畫,一起關閉
wv.show()
}).exec()
}
})
// #endif
},
如果存在uniapp
和webview
頁面的通信,記得加上這個。
mounted() {
// this.init()
plus.globalEvent.addEventListener('plusMessage', function(msg){
if(msg.data.args.data.name == 'postMessage'){
// 上面代碼中我傳遞了一個success屬性
// 這里對應
if(msg.data.args.data.arg.success == "success"){
// 通信成功
// 這里需要做些什么自行決定,我的大寶貝
// #endif
}
}
});
},
原文鏈接:https://blog.csdn.net/weixin_45016896/article/details/122259819
相關推薦
- 2023-04-20 navicat 連接 mongodb 報錯[13][Unauthorized] command li
- 2022-07-22 mybatis源碼之集成spring原理詳解
- 2022-10-04 Python基礎之dict和set的使用詳解_python
- 2022-05-06 嵌入式C語言輕量級程序架構內核編寫_C 語言
- 2022-05-06 Python學習之函數的定義與使用詳解_python
- 2024-04-04 jQuery實現ajax語法,post請求發送數組對象(jquery)
- 2022-11-05 Flutter實現一個支持漸變背景的Button示例詳解_Android
- 2022-10-29 vite 配置 @ 路徑別名
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支