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

编程之家收集整理的这篇文章主要介绍了uniapp文件上传(任意文件,多文件上传)编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

此处代码只针对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
					}
					
			    }  
			});
		},

支付解锁全部内容

限时5折
¥9.9 ¥19.9

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

HTML相关文章

HTML邮件内容所在上下文或者说所在外部容器(以下简...
HTML内容类型决定使用的语义标签,在网页中某种类型...
HTML代码在书写的时候应该遵循什么规范?青岛星网今...