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

此处代码只针对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

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

重点

思路

上代码

相关推荐