开发小问题杂记2

1.在vue中循环获取对象中的属性名和属性值

<ul>
 <li v-for="(value,key,index) in obj" :key="index"></li>
</ul>

<!--其中value是属性值，key是对应的属性名-->

2.在前一页面通过this.$router.push({name:"nextPage"})跳转的时候，需要将当前页面的一个数组带往下一个页面。

解决方案有两种，一种是路由传参，一种是查询字符串传参

路由传参：

//前页面
this.$router.push({name:"nextPage",params:{arr:this.arr}})
//后页面，不需要修改router.js中参数
created(){
 let arr=this.$route.params.arr
 console.log(arr)
}

查询字符串传参

//前页面
this.$router.push({name:"nextPage",query:{arr:this.arr}})
//后页面
created(){
 let arr=this.$route.query.arr
 console.log(arr)
}

比较：路由传参和查询字符串传参都可以在跳转后的页面拿到数据(数据仍然是数组格式)，但是，路由传参方式会将原本后面页面的路径地址改成去掉所有path累加的原始路径；而查询字符串传参会将数组作为字符串添加到路由后面。

3.在使用element-ui开发时，对于文件上传和下载的方法

1）文件下载

后端：有两个接口，一个用来获取文件的名称，一个是下载地址，具体如下

//API文件。⬇️
//可以在API文件中管理一些后台路径
Let common={
  Download:’后台下载地址’
}
export default{common}

//后台接口调用思路是：先获取下载的文件名称，通过后台下载的地址+文件名获取文件
//接口调用函数
Export function getfilename(){
  Return request({
   URL:’获取文件名称的接口地址’,
  Method:’Get’
 })
}

前端：引入API中用到的方法和路径，在方法中：

引入API中方法与路径
import {common,getfilename} from ‘@/api/mg.js’

importfile(){
  Getfilename().then(res=>{
    //获取下载的文件名称
    Let filename=res.data.filename
    //下载文件
   Window.location.href=`${common.dowmload}?filename=${Filename}`
 })
}

这样便可以下载到来自服务器的文件～

扫描二维码关注公众号，回复： 10670483 查看本文章

2) 文件上传

文件上传比较复杂，使用到了来自element-ui中的el-upload 组件，但是对于其使用我不太熟练，先记录下我们实现的过程吧。

文件上传是post请求；

<el-upload
   Style=“Display:inline-block”
   Action=“”
   Multiple
   :File-list=“Filelist”
>
<!—多文件上传—>
  <el-button @click=“Importfiles”><i class=“El-icon-upload”></i>上传文件</el-button>
</el-upload>

在data中：

Data(){
 Return{
   Filelist:[]
 }
}

重点是，上传的方法：

Importfiles(item){
  //这里需要2个参数，一个是文件名称，一个是文件
  Let form=new FormData()//之后补充一下这是个什么
  form.append('file',item.file)
  form.append('filename',item.filename)
  //调用API接口函数 uploadfile,同样需要上传文件的地址
  uploadfile(form).then(res=>{
    //流程是这样，这里就可以读取到上传文件是否成功的状态了，我的后端小伙伴做了断点，所以上传文件的效果如何后面待补充
 })
}

前端大神看到的这里的解决方案路径是：文件的上传与下载

写在最后：感谢有经验的同事处理问题，我只是将他们的操作整理出来！小白爬坡，任重道远

猜你喜欢