iview 文件的上传和下载

一：直接用iview的upload

1.1上传

1.html

//action: 		  上传的地址，必填
//data:   		  上传时附带的额外参数
//on-success:     文件上传成功时的钩子，返回字段为 response, file, fileList

<Upload
        :action= "env + '/Manage/upload'"  
        :data="{companyId: row.ID}"
        :on-success="success">
    <Button type="primary" size="small" icon="ios-cloud-upload-outline">上传</Button>
</Upload>

2.js

//上传成功
success(response: any) {
    this.$Message.info("上传成功！");
}

//判断当前的环境
if (process.env.NODE_ENV === 'development') {
    //开发环境 do something
    this.env = 'api';
} else {
    //生产环境 do something
}

1.2.下载

//下载文件
download(row: any) {
    if (process.env.NODE_ENV === 'development') {
        //开发环境 do something
        window.open("本地ip/Manage/download?fileId=" + row.ID);
    } else {
        //生产环境 do something
        window.open("线上ip/Manage/download?fileId=" + row.ID);
    }
}

二.先填写文件名再上传

2.1上传

html

<div>
    <Upload :before-upload="handleUpload" action="/file/jcbg/upload">
        <Button icon="ios-cloud-upload-outline">请选择要上传的政策法规</Button>
    </Upload>
    <div>
        <Input v-model="fileName" placeholder="文件名称..." clearable />
    </div>
</div>

<div slot="footer">
    <Button type="success" size="large" long :loading="loadingStatus" @click="upload(fileName,fileType)">上传</Button>
</div>

js

//选择文件
handleUpload (file) {
    this.file = file;
    this.fileName = file.name.substring(0,file.name.indexOf("."));//获取文件名
    // this.fileType = file.name.substring(file.name.indexOf("."), file.name.length);//获取文件后缀
    return false;
},

//上传文件
upload (fileName,fileType) {
    if(!this.file || !this.fileName || !this.fileType) {
        this.$Message.error('请选则文件，并请将文件名称和类型填写完整！');
        return
    }
    this.uploadModal = false; //关闭导入的弹框
    this.loadingStatus = true;
    commonsAPI.importPolicy(fileName,fileType,this.file).then(res => {
        if(res == "200") {
            this.file = null; //清空文件
            this.loadingStatus = false;
            this.$Message.success('上传成功!');
            this.getPolicyList(); //重新政策法规列表
            this.fileName = "";  //清空输入框信息：文件名称
            this.fileType = ""; //清空输入框信息：文件类型
        } else {
            this.$Message.error('上传失败!');
        }
    });
},


//common.js
/**
 * 上传政策法规
 * @param fileName：文件名称
 * @param fileType：文件类型
 * @param file：上传的文件
 */
importPolicy(fileName,fileType,file) {
    return new Promise((resolve, reject) => {
        let param = new FormData(); //创建form对象
        param.append('file',file);//通过append向form对象添加数据
        console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
        let config = {
            headers:{'Content-Type':'multipart/form-data'}
        }; //添加请求头
        axios.post('/file/zcfg/upload?lx='+ fileType + "&mc=" +  fileName,param,config).then(res => {
            // 异步成功返回值
            resolve(res.status)
        }).catch(err => {
            reject(err)
        });
    })
},

2.2下载

/**
 * 下载政策法规
 * @param excelId：附件id
 * @param excelName：文件名称
 * @param excelNameType：文件后缀
 * @param vm：this
 */
downloadPolicy(excelId, excelName, excelNameType, vm) {
    //下载政策法规
    let url = '/file/zcfg/download/' + excelId;
    vm.$Notice.config({
        top: 50,
        duration: 3
    });
    axios({
        method: 'get',
        url: url,
        responseType: 'blob',
    }).then(res => {
        if (res.data.type) {
            if (!res) {
                return
            }
            let url = window.URL.createObjectURL(res.data);//定义浏览器下载url
            let link = document.createElement('a'); //创建a标签
            link.style.display = 'none';//隐藏链接样式
            link.href = url;//设定链接 href
            link.setAttribute('download', excelName + excelNameType); //设置链接下载属性下载文件名
            document.body.appendChild(link);//在body 插入改链接dom
            link.click();//模拟点击
            vm.$Notice.success({title: excelName + excelNameType + '下载成功'});//推送下载成功提示
        } else {
            vm.$Notice.error({title: excelName + excelNameType + '下载失败'});//推送下载失败提示
        }
    })
},

三.用原生js实现下载文件，并在请求头中加入token

//url: 下载地址, 
//fileName: 文件名, 
//suffix: 文件后缀

// 导出文件
export const downloadFile = (url: string, fileName: string, suffix: string) => {
    // 获取token
    let token: any = localStorage.getItem('token');

    var xhr = new XMLHttpRequest();
    //GET请求,请求路径url,async(是否异步)
    xhr.open('GET', url, true);
    //设置请求头参数的方式,如果没有可忽略此行代码
    xhr.setRequestHeader("refresh-token", token);
    //设置响应类型为 blob
    xhr.responseType = 'blob';
    //关键部分
    xhr.onload = function (e) {
        //如果请求执行成功
        if (this.status == 200) {
            // var blob = this.response;
            let type = "application/octet-stream";
            let blob = new Blob([this.response], {type: `application/${type};charset=utf-8`});
            // 获取heads中的filename文件名
            let downloadElement = document.createElement('a');
            // 创建下载的链接
            let href = window.URL.createObjectURL(blob);
            downloadElement.href = href;
            // 下载后文件名
            // downloadElement.download = '文件名.xls';
            downloadElement.download = fileName + suffix;
            document.body.appendChild(downloadElement);
            // 点击下载
            downloadElement.click();
            // 下载完成移除元素
            document.body.removeChild(downloadElement);
            // 释放掉blob对象
            window.URL.revokeObjectURL(href);
        }
    };
    //发送请求
    xhr.send();
};