vue文件上传和下载（项目经验）| 获取url中的参数 | 三元运算符扩展

1.如果下载单个固定的文件，可以用

<a href="文件地址" download="文件名"></a>

<a href="https://jiulong-fan.com/uploads/AC%20Axial%20G-SERIES%20FANS%201-46P.pdf" download="文件名"></a>

2.文件上传

html:

<div class="btn_upload">上传

   <input class="upload" type="file" value="上传" id="file" @change="update" accept=".csv,.xls,.xlsx">

</div>

<p class="text" >支持.cvs,.xls,.xlsx格式文件，文件大小不超过 4M</p>

//需要本地引入vue.js文件和引入axios.min.js文件

<script src="js/vue.js "></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

js:

获取URL中key值，将key和file通过post传递给服务器

      var app = new Vue({
        el: "#main",
        data: {
          keyValue:'',        
        },
   
        methods: {

	     // 获取url参数
        getUrlKey(name) {
            return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
          },
          // 文件上传
          update(e){
            let file = e.target.files[0];
            let param = new FormData(); //创建form对象
            this.keyValue = this.getUrlKey('key');//获取url中的key值
            param.append('file',file);//通过append向form对象添加数据
            param.append('key',this.keyValue);
            console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
            let config = {
              headers:{'Content-Type':'multipart/form-data'}
            }; //添加请求头
            axios.post('http://172.16.10.48:6060/api/mailMarket/importCustomerMail',param,config)
            .then(response=>{
              if(response.data.status_code == 200){
         
                console.log(response.data);
                // this.expired =true;
              }else{
   
              }
            })
          },
          
       }
      })

css:

.btn_upload{
margin:0 auto;
width: 512px;
line-height:80px;
text-align:center;
background: #4A82F4;
border-radius: 7px;
font-size: 24px;
font-weight: 500;
color: #FFFFFF;
position:relative;
}
.upload{
width: 512px;
height: 80px;
position: absolute;
left: 0px;
top: 0px;
opacity:0;
}

三元运算符扩展

:title="editingStatus==='viewing'?'查看邮件计划':editingStatus==='editing'?'编辑邮件计划':'新建邮件计划'"