首页 > 资讯 > 前端开发 > JavaScript >如何在vue3+ts项目中使用query和params传参

302

分享到

如何在vue3+ts项目中使用query和params传参

vue query和params传参区别 vue的query传参 vue的params传参 2023-05-16 11:05:11 302人浏览泡泡鱼

摘要

目录一 query 传参（类似get请求）query 传参方式①query 传参方式② query 传参方式③二 params 传参（类似post请求）params 传

一 query 传参（类似get请求）

query 传参方式①

传递方组件

home.vue

<template>
 
<div class='c'>
    <p>query传参</p>
    <el-button type="success" @click="toList"> to list</el-button>
</div>
 
</template>
 
<script lang='ts' setup>
 
import { ref } from 'Vue'
// 1 引入路由跳转方法useRouter
import { useRouter } from 'vue-router'
// 2 拿到实例
const router = useRouter()
// 3 ref定义基本类型数据
const name = ref('梨花白')
// 4 query传参
const toList = ()=>{
    router.push({
        //这种对象式传参写法 query除开和path搭配外还可以和name一起使用
        path:'/list',
        //或者这样 path和name任选其一
        //name:'List',
        query:{
            name:name.value
        }
    })
}
 
</script>
 
<style scoped>
.c{
    width: 80%;
    padding: 20px;
    margin: 0 auto;
    border:1px solid red;
}
.c>p>span{
    color:coral;
}
</style>

看下 router/index.ts 文件

import { createRouter,createWEBHistory,RouteRecordRaw } from 'vue-router'
 
const routes:Array<RouteRecordRaw> = [
    {
        path:'/',
        component:()=>import('../pages/home.vue')
    },{
        path:'/home',
        name:'Home',//路由命名
        component:()=>import('../pages/home.vue')
    },{
        path:'/list',
        name:'List',//路由命名 为路由跳转作准备
        component:()=>import('../pages/list.vue')
    },{
        //定义404页面
        path:'/404',
        component:()=>import('../pages/notfound.vue')
    },{
        //匹配未定义路由 然后重定向至404页面
        path:'/:pathMath(.*)',
        redirect:'/404'
    }
]
 
const router = createRouter({
    routes,
    history:createWebHistory()
})
 
export default router

有两个注意点

① ref定义响应式基本类型数据后，修改和赋值要带上 .value

② query是一个对象类型所以我们定义的基本类型数据不能直接赋值要给对象式写法 {}

像以下两种写法都是报错的

<script lang='ts' setup>
 
import { ref } from 'vue'
 
// 1 引入路由跳转方法useRouter
import { useRouter } from 'vue-router'
// 2 拿到实例
const router = useRouter()
// 3 ref定义基本数据
const name = ref('梨花白')
// 4 query传参
const toList = ()=>{
    router.push({
        path:'/list',
        query:name //报错 不能将类型“Ref<string>”分配给类型“LocationQueryRaw”。
                   //类型“Ref<string>”中缺少类型“string”的索引签名
    })
}
 
</script>

<script lang='ts' setup>
 
import { ref } from 'vue'
 
// 1 引入路由跳转方法useRouter
import { useRouter } from 'vue-router'
// 2 拿到实例
const router = useRouter()
// 3 ref定义基本数据
const name = ref('梨花白')
// 4 query传参
const toList = ()=>{
    router.push({
        path:'/list',
        query:name.value //报错 不能将类型“string”分配给类型“LocationQueryRaw”
                   
    })
}
</script>

接收方组件

list.vue

<template>
    
<div class='c'>
    <p>query接参</p>
    <!-- 4 展示数据 -->
    <p>name: <span>{{ name }}</span></p>
</div>
 
</template>
 
<script lang='ts' setup>
 
// 1 引入useRoute路由信息方法
import { useRoute } from 'vue-router'
// 2 获取实例
const route = useRoute()
// 3 解构赋值
const { query:{name} } = route
 
</script>
 
<style scoped>
.c{
    width: 80%;
    padding: 20px;
    margin: 0 auto;
    border:1px solid red;
}
.c>P>span{
    color:coral;
}
</style>

效果：

动态效果：

以上我们可以得知当使用query传参时，参数的详细内容都会在地址栏完整的展示出来。

这对于数据安全来说是致命的

当然也有它自有的优势：刷新不会丢失数据

下面看看使用query传参的另一种形式：？传参

query 传参方式②

传递方组件

home.vue

<template>
 
<div class='c'>
    <p>query传参</p>
    <el-button type="success" @click="toList"> to list</el-button>
</div>
 
</template>
 
<script lang='ts' setup>
 
import { toRefs,ref,Reactive } from 'vue'
// 1 引入路由跳转方法useRouter
import { useRouter } from 'vue-router'
// 2 拿到实例
const router = useRouter()
// 3 ref定义基本数据
const name = ref('桃花夭')
// 4 query ?传参 
const toList = ()=>{
    router.push('/list?name=' + name.value)
    //也可以使用es6里的模板字符串
    //router.push(`/list?name=${name.value}`)
}
 
</script>
 
<style scoped>
.c{
    width: 80%;
    padding: 20px;
    margin: 0 auto;
    border:1px solid red;
}
.c>p>span{
    color:coral;
}
</style>

效果：

动态效果：

两者效果别无二致也有同学说我在传入引用类型数据时老是报错怎搞嘞

好的下面开始传递引用类型数据

传递方组件

home.vue

<template>
 
<div class='c'>
    <p>query传参</p>
    <el-button type="success" @click="toList"> to list</el-button>
</div>
 
</template>
 
<script lang='ts' setup>
 
import { ref,reactive } from 'vue'
// 1 引入路由跳转方法useRouter
import { useRouter } from 'vue-router'
// 2 拿到实例
const router = useRouter()
// 3 定义数据接口类型
interface props {
    id:number,
    content:string
}
// 4 reactive定义引用类型数据
const arr:props[] = reactive([
    {
        id:1,
        content:'关山难越，谁悲失路之人？'
    },{
        id:2,
        content:'萍水相逢，尽是他乡之客！'
    }
])
// 4 或这样
// const arr = reactive([
//     {
//         id:1,
//         content:'关山难越，谁悲失路之人？'
//     },{
//         id:2,
//         content:'萍水相逢，尽是他乡之客！'
//     }
// ] as props[])
 
// 5 query ?传参 
const toList = ()=>{
    router.push('/list?arr=' + JSON.stringify(arr))
    //也可以使用模板字符串
    // router.push(`/list?arr=${jsON.stringify(arr)}`)
}
 
</script>
 
<style scoped>
.c{
    width: 80%;
    padding: 20px;
    margin: 0 auto;
    border:1px solid red;
}
.c>p>span{
    color:coral;
}
</style>

接收方组件

list.vue

<template>
 
  <div class="c">
    <p>query接参</p>
    <!-- 4 展示数据 -->
    <p v-for="item in arr" :key="item.id">
      <span>{{ item.content }}</span>
    </p>
  </div>
 
</template>
 
<script lang="ts" setup>
 
// 1 引入useRoute方法
import { useRoute } from "vue-router";
// 2 获取实例
const route = useRoute();
// 3 使用JSON.parse()方法把传过来的字符串参数转回对象
const arr = JSON.parse(route.query.arr as string);
 
</script>
 
<style scoped>
.c {
  width: 80%;
  padding: 20px;
  margin: 0 auto;
  border: 1px solid red;
}
.c > P > span {
  color: coral;
}
</style>

效果：

动态效果：

所以是

在使用？传参传入引用类型数据时传递时要使用JSON.stringify()方法转成字符串类型

在接收时要使用JSON.parse()方法再转回最初的类型

易错点如下：

query 传参方式③

其实也就是声明式路由跳转时带参

传递方组件

home.vue

<template>
 
<div class='c'>
    <p>query传参</p>
    <router-link 
    //to的对象式写法 与编程式路由跳转传参的对象式写法相对应
    :to="{
        path:'/list',
        //或 name:'List'
        query:{
            arr:JSON.stringify(arr)
        }
    }">
    <el-button type="success"> to list</el-button>
</router-link>
 
//<router-link 
    //to的字符串写法 与编程式路由跳转的？传参写法相对应
//    :to="`/list?arr=${JSON.stringify(arr)}`">
//    <el-button type="success"> to list</el-button>
//</router-link>
    
</div>
 
</template>
 
<script lang='ts' setup>
 
import { toRefs,ref,reactive } from 'vue'
// 1 引入路由跳转方法useRouter
import { useRouter } from 'vue-router'
// 2 拿到实例
const router = useRouter()
// 3 定义数据接口类型
interface props {
    id:number,
    content:string
}
// 4 ref定义基本数据 但未定义数据类型
const arr:props[] = reactive([
    {
        id:1,
        content:'关山难越，谁悲失路之人？'
    },{
        id:2,
        content:'萍水相逢，尽是他乡之客！'
    }
])
// 4 或这样
// const arr = reactive([
//     {
//         id:1,
//         content:'关山难越，谁悲失路之人？'
//     },{
//         id:2,
//         content:'萍水相逢，尽是他乡之客！'
//     }
// ] as props[])
 
</script>
 
<style scoped>
.c{
    width: 80%;
    padding: 20px;
    margin: 0 auto;
    border:1px solid red;
}
.c>p>span{
    color:coral;
}
</style>

效果：

二 params 传参（类似post请求）

params 传参方式①

传递方组件

home.vue

<template>
 
 <div class="c">
    <p>params 传参</p>
    <el-button type="warning" @click="toList"> to list page</el-button>
 </div>
 
</template>
 
<script lang='ts' setup>
 
import { toRefs,ref,reactive } from 'vue'
// 1 引入路由跳转方法useRouter
import { useRouter } from 'vue-router'
// 2 拿到实例
const router = useRouter()
// 3 ref定义基本类型数据 
const str = ref('月出于东山之上，徘徊于斗牛之间。')
// 4 params 传参 只能搭配name使用 path会忽略params带参
const toList = ()=>{
    router.push({
        name:'List',
        params:{
            str:str.value
        }
    })
}
</script>
 
<style scoped>
.c{
    width: 80%;
    padding: 20px;
    margin: 0 auto;
    border:1px solid red;
}
.c>p>span{
    color:coral;
}
</style>

接收方组件

list.vue

<template>
 
  <div class="c">
    <p>params接参</p>
    <!-- 4 展示数据 -->
    <p>str: <span>{{ str?str:'刷新我就不见啦！' }}</span></p>
  </div>
 
</template>
 
<script lang="ts" setup>
 
// 1 引入useRoute路由信息方法
import { useRoute } from "vue-router";
// 2 获取实例
const route = useRoute();
// 3 解构赋值 刷新页面 参数丢失 
const { params:{str} } = route;
 
</script>
 
<style scoped>
.c {
  width: 80%;
  padding: 20px;
  margin: 0 auto;
  border: 1px solid red;
}
.c > P > span {
  color: coral;
}
</style>

效果：

在使用params传参时参数详情在请求体里不会展示在地址栏中这对数据安全来说是友好的

但弊端就是刷新页面数据丢失

其实在实际项目里，数据多是请求数据赋值来的

所以接下来我们尝试home.vue组件里请求数据后传递给list.vue组件展示数据

传递方组件

home.vue

<template>
 
 <div class="c">
    <p>params 传参</p>
    <el-button type="warning" @click="toList"> to list page</el-button>
 </div>
 
</template>
 
<script lang='ts' setup>
 
import { toRefs,ref,reactive } from 'vue'
// 引入接口
import { tt } from '../request/api'
// 1 引入路由跳转方法useRouter
import { useRouter } from 'vue-router'
// 2 拿到实例
const router = useRouter()
// 3 定义接口数据
interface props {
    userId:number,
    city:string,
    address:string,
    name:string,
    zip:number,
    region:string,
    date:string
}
// 4 reactive定义数据
let list:props[] = reactive([])
// 5 params 传参 必须搭配name使用 path会忽略params带参
const toList = ()=>{
    tt().then((res:any)=>{
        if(res && res.data.code === 200){
            list = res.data.data.list
            router.push({
        name:'List',
        params:{
            list:JSON.stringify(list)
        }
    })
        }else{
            alert(res.data.msg)
        }
    })
    
}
</script>
 
<style scoped>
.c{
    width: 80%;
    padding: 20px;
    margin: 0 auto;
    border:1px solid red;
}
.c>p>span{
    color:coral;
}
</style>

接收方组件

list.vue

<template>
 
  <div class="c">
    <p>params接参</p>
    <!-- 4 展示数据 -->
    <div class="c" v-for="item in list" :key="item.userId">
          <p>名称：<span>{{ item.name }}</span></p>
          <p>城市：<span>{{ item.city }}</span></p>
          <p>地区：<span>{{ item.region }}</span></p>
          <p>地址：<span>{{ item.address }}</span></p>
          <p>日期：<span>{{ item.date }}</span></p>
          <p>编号：<span>{{ item.zip }}</span></p>
      </div>
      </div>
 
</template>
 
<script lang="ts" setup>
 
// 1 引入useRoute路由信息方法
import { useRoute } from "vue-router";
// 2 获取实例
const route = useRoute();
// 3 声明赋值 刷新页面 参数丢失 这里报错
const  list  = JSON.parse(route.params.list as string);
 
</script>
 
<style scoped>
.c {
  width: 80%;
  padding: 20px;
  margin: 0 auto;
  border: 1px solid red;
}
.c > P > span {
  color: coral;
}
</style>

效果：

那我们在使用params传参时如何避免页面刷新导致参数丢失问题呢？

那就是 params 的第二种传参方式了：动态路由传参

params 传参方式②

1 既然名叫动态路由传参那首先第一步就是在router/index.ts里配置动态路由

router/index.ts

import { createRouter,createWebHistory,RouteRecordRaw } from 'vue-router'
 
const routes:Array<RouteRecordRaw> = [
    {
        path:'/',
        component:()=>import('../pages/home.vue')
    },{
        path:'/home',
        name:'Home',//路由命名
        component:()=>import('../pages/home.vue')
    },{
        path:'/list/:arr',//接收方路由配置
        name:'List',//路由命名 为路由跳转作准备
        component:()=>import('../pages/list.vue')
    },{
        //定义404页面
        path:'/404',
        component:()=>import('../pages/notfound.vue')
    },{
        //匹配未定义路由 然后重定向至404页面
        path:'/:pathMath(.*)',
        redirect:'/404'
    }
]
 
const router = createRouter({
    routes,
    history:createWebHistory()
})
 
export default router

2 传递方组件

home.vue

<template>
 
 <div class="c">
    <p>params 传参</p>
    <el-button type="warning" @click="toList"> to list page</el-button>
 </div>
 
</template>
 
<script lang='ts' setup>
 
import { toRefs,ref,reactive } from 'vue'
// 引入接口
import { tt } from '../request/api'
// 1 引入路由跳转方法useRouter
import { useRouter } from 'vue-router'
// 2 拿到实例
const router = useRouter()
// 3 定义接口数据
interface props {
    userId:number,
    city:string,
    address:string,
    name:string,
    zip:number,
    province:string,
    date:string
}
// 4 ref定义基本数据 但未定义数据类型
let list:props[] = reactive([])
// 5 params 传参 必须搭配name使用 path会忽略params带参
const toList = ()=>{
    tt().then((res:any)=>{
        if(res && res.data.code === 200){
            list = res.data.data.list
            router.push({
        name:'List',
        params:{
            //动态路由配置/:arr 这里就是arr
            arr:JSON.stringify(list)
        }
    })
        }else{
            alert(res.data.msg)
        }
    })
    
}
</script>
 
<style scoped>
.c{
    width: 80%;
    padding: 20px;
    margin: 0 auto;
    border:1px solid red;
}
.c>p>span{
    color:coral;
}
</style>

接收方组件

list.vue

<template>
 
  <div class="c">
    <p>params接参</p>
    <!-- 4 展示数据 -->
    <div class="c" v-for="item in list" :key="item.userId">
          <p>名称：<span>{{ item.name }}</span></p>
          <p>城市：<span>{{ item.city }}</span></p>
          <p>地区：<span>{{ item.region }}</span></p>
          <p>地址：<span>{{ item.address }}</span></p>
          <p>日期：<span>{{ item.date }}</span></p>
          <p>编号：<span>{{ item.zip }}</span></p>
      </div>
      </div>
 
</template>
 
<script lang="ts" setup>
 
// 1 引入useRoute路由信息方法
import { useRoute } from "vue-router";
// 2 获取实例
const route = useRoute();
// 3 声明赋值 刷新页面 参数不会丢失
const  list  = JSON.parse(route.params.arr as string);
 
</script>
 
<style scoped>
.c {
  width: 80%;
  padding: 20px;
  margin: 0 auto;
  border: 1px solid red;
}
.c > P > span {
  color: coral;
}
</style>

效果：

可！这和query传参有毛区别？参数都会在地址栏显示

从效果上看是这样的没有区别

只是query传参有长度限制，而params无

params的声明式路由跳转传参就不赘述了，会了编程式路由跳转传参，那声明式就不在话下。

注意query和path或name都可搭配使用，而params只能和name搭配就行了

在尝试写vue3+ts项目时，遇到的绝大多数问题都是数据类型定义相关的也就是ts问题突出

都说any大法好，这也就失去了类型限定即ts的意义这又和js毫无分别了

所以ts还是重点学习的方面

最后提醒一句：

如果你在vue3+ts项目里使用params传参时，尽管代码核实几遍都是对的，可还是报错，

那可能不是你的问题，尝试下载 vue-router@4.0.1 版本，然后重启项目，你可能就惊奇的发现

参数就这么展示在自己眼前了

总结

到此这篇关于如何在vue3+ts项目中使用query和params传参的文章就介绍到这了,更多相关vue3+ts用query和params传参内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 如何在vue3+ts项目中使用query和params传参

本文链接: https://www.lsjlt.com/news/209790.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

如何在vue3+ts项目中使用query和params传参

目录一 query 传参（类似get请求）query 传参方式①query 传参方式② query 传参方式③二 params 传参（类似post请求）params 传...

99+

2023-05-16

vue query和params传参区别 vue的query传参 vue的params传参
vue中如何使用params、query传参

这篇文章主要介绍vue中如何使用params、query传参，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！声明式：<router-link :to="..."...

99+

2022-10-19
详解如何在Vue3+TS的项目中使用NProgress进度条

目录写在前面在项目中安装简单的封装在Vue切换路由时展示进度条写在前面 NProgress是一个轻量级的进度条组件，在Github上已经2.4万star数了，虽然这个组件已经好...

99+

2022-11-13
vue项目实例中用query传参如何实现跳转效果

目录用query传参实现跳转效果传值页面接收参数页面vue使用query传参，解决跳转回退无参数渲染页面，无内容的方法（不需使用缓存的技术）简说params和query的区别用que...

99+

2022-11-13
在Vue3项目中使用如何echarts问题

目录一，创建 Vue3 项目并安装 echarts二，创建数据可视化组件（一）组件内容（二）使用组件（三）程序解释三，响应式刷新更多功能可扩展总结记得第一次使用 echarts 还是...

99+

2023-05-19

Vue3使用echarts Vue3项目中echarts Vue3项目中使用echarts
图文详解如何在vue3+vite项目中使用svg

今天在vue3+vite项目练习中，在使用svg时，发现之前的写法不能用，之前的使用方法参考vue2中优雅的使用svg const req = require.context('...

99+

2022-11-12
在vue3项目中如何使用新版高德地图

这篇文章主要讲解了“在vue3项目中如何使用新版高德地图”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“在vue3项目中如何使用新版高德地图”吧！1. 首先你要注册好账号登录2. 获取key和...

99+

2023-07-05
如何在Java项目中使用args参数数组

如何在Java项目中使用args参数数组？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。传递普通参数public class Test { ...

99+

2023-06-06
如何在Vue3.0 项目中使用TypeScript 和 Vite

如何在Vue3.0 项目中使用TypeScript 和 Vite？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。Vue的优点Vue具体轻量级框架、简单易学、双向数据绑定、组件...

99+

2023-06-06
Apache 和 Django：如何在 Java 项目中使用？

Apache 和 Django 都是非常流行的 Web 开发框架，但它们使用的编程语言不同。Apache 使用 Java 编程语言，而 Django 使用 Python。然而，有时候我们需要在 Java 项目中使用 Django，这样可以...

99+

2023-08-23

linux apache django
Git和Go语言：如何在项目中使用？

Git是目前最流行的版本控制工具之一，而Go语言则是一种快速、高效、可靠的编程语言。在实际项目开发中，使用Git和Go语言可以大大提高开发效率和代码质量。那么如何在项目中使用Git和Go语言呢？本文将为您详细介绍。一、Git入门 Git...

99+

2023-10-14

对象 http git
如何在Java项目中使用注解和反射

今天就跟大家聊聊有关如何在Java项目中使用注解和反射，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。Java可以用来干什么Java主要应用于：1. web开发；2. Android开...

99+

2023-06-06
在java项目中使用Demo如何实现一个文件上传功能

在java项目中使用Demo如何实现一个文件上传功能？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。说到文件上传我们要做到：引入两个包：commons-fileupload-1....

99+

2023-05-31

文件上传 demo java
在Java项目中使用WebUploader如何实现一个文件上传功能

本篇文章为大家展示了在Java项目中使用WebUploader如何实现一个文件上传功能，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。之前自己写小项目的时候也碰到过文件上传的问题，没有找到很好的解决方...

99+

2023-05-31

java webuploader 文件上传
Python shell和npm：如何在项目中正确使用它们？

对于许多开发人员而言，Python shell和npm是日常开发中必不可少的工具。然而，有些人对于如何在项目中正确使用它们感到困惑。本文将介绍Python shell和npm的基本概念，以及如何在项目中使用它们。 Python shell...

99+

2023-07-31

shell 关键字 npm
隐式和显式操作符如何在C#项目中使用

隐式和显式操作符如何在C#项目中使用？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。什么是显式，什么是隐式隐式类型转换它是运行时自动帮你完成的，言外之意就是你不需要人为干预...

99+

2023-06-14
如何在Java项目中使用API打包和记录日志？

在Java项目中，API打包和记录日志是非常重要的部分。API打包可以将代码打包成一个可复用的模块，方便其他开发者在其项目中引用，而记录日志则可以帮助开发者更好地了解应用程序运行的情况。在本文中，我们将介绍如何在Java项目中使用API打包...

99+

2023-08-20

日志打包 api
如何在Vue2.x项目中使用防抖和节流功能

本篇文章为大家展示了如何在Vue2.x项目中使用防抖和节流功能，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。vue是什么软件Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它...

99+

2023-06-06
Go和npm：如何在项目中正确使用文件路径？

在现代开发中，文件路径的使用已经成为了一个必不可少的部分。在使用Go和npm这两个流行的编程语言和包管理器时，正确使用文件路径也变得非常重要。本文将帮助你了解如何在项目中正确地使用文件路径。 Go和npm是两种非常流行的编程语言和包管理器。...

99+

2023-06-03

npm path 文件
在Java项目中使用fileupload组件如何实现一个文件上传功能

本篇文章给大家分享的是有关在Java项目中使用fileupload组件如何实现一个文件上传功能，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。使用fileupload组件的原因：...

99+

2023-05-31

java fileupload 文件上传