文件上传下载

一、上传

1、效果图

2、页面代码

 <form id="uploadForm" enctype="multipart/form-data">
	  <a class="file" id="afileupload">点击上传凭证文件
         <input id="uploadfile"  class="change" type="file" name="file"  />
      </a>
      <div class="showFileName"></div>
        <div class="button roleBtn">
            <el-button type="primary" :plain="true" @click.stop="insertChargingTimePriceCommit()" v-if="diaTitle=='新增油价信息'">新 增</el-button>
            <el-button @click="insertChargingTimePriceServiceDia=false">取 消</el-button>
        </div>
	    </form> 

3、改变原始样式

<input id="uploadfile"  class="change" type="file" name="file"  />

CSS代码

.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #ffffff;
    text-decoration: none;
}
.change{
    opacity: 0;
}

由于设置input样式为opcity后，选择文件时没有显示文件名，需要用js获取重新赋值。

 $('body').on("change",'.change',function(){
        var filePath=$(this).val();
        console.log("filePath",filePath)
        var arr=filePath.split('\\');
        var fileName=arr[arr.length-1];
        $(".showFileName").html(fileName);
      })

4、上传按钮事件

 insertChargingTimePriceCommit(){
        var _this = this;
        var formData = new FormData();
        formData.append('file', $('#uploadfile')[0].files[0]);
        var param = {   
          "token": getSessiontoken('token'),
          "chargingOilPrice":_this.insertChargingTimePriceTab,
        } 
        var data = utilFile.encrypt(JSON.stringify(param));
        var requrl ='/chargingOilPrice/insertChargingOilPrice?x=a'+data;
       $.ajax({ 
              type : "POST", 
              url : baseURL+requrl, 
              data : formData, 
              contentType: false,
              processData: false,
              success: function (data) {
                var obj = JSON.parse(utilFile.decrypt(data.a));
                if (obj.code == 200) {
                  _this.$message.success(obj.msg);
                  _this.insertChargingTimePriceTab = {};
                  _this.insertChargingTimePriceServiceDia = false;
                  _this.listChargingTimePrice();
                } else {
                  _this.$message.error(obj.msg);
                }
              },
              error: function () {
                    alert("上传失败！");
                }
            }); 
          }

二、下载

window.location.href = urls; // 本窗口打开下载
window.open(urls, ‘_blank’); // 新开窗口下载

  //文件下载
  downloadChargingOilPriceFile(row){
      var param = {
        "token": getSessiontoken('token'),
        "oilEffectiveTime":row.oilEffectiveTime,
        "voucherImagePath":row.voucherImagePath
      }
      let data = utilFile.encrypt(JSON.stringify(param));
      let requrl ='/chargingOilPrice/downloadChargingOilPriceFile?x=a'+data;
      window.location.href = baseURL + requrl;
    },

window.location.href = 路径；（可以触发下载）
但是存在安卓原生或其他设备自带浏览器不会触发下载所以采用下面的代码处理方式

var myFrame= document.createElement('iframe'); 
myFrame.src = 'url'; 
myFrame.style.display = 'none'; 
document.body.appendChild(myFrame);