vue 上传,下载,预览文件及预览TXT时乱码处理

admin管理员组

文章数量:1123002

vue 上传,下载,预览文件及预览TXT时乱码处理

1.上传文件

/*这里顺便写一下再vue中获取input里选择的文件，具体的input属性可去官网查看*/
<input class="import-input" type="file" accept=".xls, .xlsx" ref="importInput" @change="fileChange(e)"/>/*这里只写methods里的方法*/
fileChange (e) {// 如果需要验证逻辑，自行添加，比如只支持txt后缀名的文件,e.target等于this.$refs.importInput// e.target.files[0].name.split('.')[0];这是文件名// e.target.files[0].name.split('.')[1];这是文件后缀名this.importFile = e.target.files[0]// this.$refs.importInput.files[0]; 这种方式也是可以的// e.target.value = '' 或 this.$refs.importInput.value = '';清空input里的值
},
importFile () {let file = new FormData();file.append('file', this.importFile);this.$api.Knowledge.importExcel(file).then(res => console.log(res))
}/*这里需要对这个请求的请求头header进行设置，在封装axios的时候加上就行*/
axios.post(url,params,{headers:
{'Content-type':'multipart/form-data; boundary=----WebKitFormBoundaryUNNKb1jqWWPagAZR'}})

2.下载文件

参考地址:

3.预览文件

/*
*url请求路径,id参数,name文件名,fileType预览文件的类型
*/
export function downLoad(url,id,name,fileType){const req = new XMLHttpRequest();const type = fileTypeLoading.open(); // 这是加载中的组件req.open('POST', axios.defaults.baseURL+'/'+url, true);req.responseType = 'blob';req.setRequestHeader('Content-Type', 'application/json');req.onload = function() {Loading.remove();// 这里因为没有对返回的数据处理编码格式，所以在预览txt时需要转换成utf-8const data = type == 'txt' ? new Blob([req.response], {type: 'application/json;charset=utf-8'}) : req.response;const datas = window.URL.createObjectURL(req.response)let blobUrl = window.URL.createObjectURL(data);localStorage.setItem('pdfName', name);window.open(blobUrl,'PDF','width:50%;height:50%;top:100;left:100;');};req.send(id);
}

本文标签： vue 上传下载预览文件及预览TXT时乱码处理