日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

uniapp文件上傳(任意文件,多文件上傳)

作者:進~ 更新時間: 2022-04-23 編程語言

此處代碼只針對APP,如果要針對全端們可以參考這個。
https://ext.dcloud.net.cn/plugin?id=5459

同樣項目需求是這樣要求可以在APP上傳任意文件,沒法啊,硬著頭皮搞啊,插件市場找啊,哎~~沒一個滿足需求的。根據上個鏈接的啟發.自己寫一個,當然咱們項目是APP,所以只滿足了APP端。

重點

講一下幾個重點把。

  1. webview: 可以了解uniapp的webview和H5+的webview(我用的H5+)
  2. webview和uniapp的通信: 如果不用通信可以不考慮這個。
  3. ·input type=file: 包括css樣式,以及js的書寫(這個不難)。

思路

如果上面三個都有所了解,那么我簡單的講一下我的思路:

Vue項目中(咱們有web端,所以有個項目)創建一個頁面,頁面的內容就是上傳文件。uniapp利用webview嵌套Vue中的頁面,上傳文件之后,如果你需要做出一下交互,那么可以使用uniappwebview的交互。

上代碼

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
			},

如果存在uniappwebview頁面的通信,記得加上這個。

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

欄目分類
最近更新