【前端】-【前端文件操作与文件上传】-【前端接受后端传输文件指南】 - ToB企服应用市场:ToB评测及商务社交产业平台

<template>
<div>
<input type="file" name="file" @change="fileChange" />
<img style="width:200px;" :src="imgbase64" />
<button @click="submit">提交</button>
</div>
</template>
<script>
import axios from "axios"
import { fstat } from "fs";
let _fileObj;
export default {
name: 'HelloWorld',
data() {
return {
imgbase64: "",
}
},
methods: {
fileChange(e) {
let file = e.target.files[0]// files是个数组
_fileObj = file;
// file常用属性：size（大小）、type（类型）、name（文件名）
if (file.size > 10 * 24 * 24) {
alert("文件不能大于十兆")
}
if (file.type !== 'video/mp4') {
alert("必须是mp4")
}
// 使用blob的slice方法可以切割文件
let _sliceBlob = new Blob([file]).slice(0, 5000);// 切割二进制的0-5000位
// 将切割后的Blob对象转成File对象（第二个参数是文件名），之后就可以上传切割后的File对象
let _sliceFile = new File([_sliceBlob], "test.png");
//将File对象或者Blob对象转成base64或text
let fr = new FileReader();
fr.readAsDataURL(_sliceFile);// readAsDataURL是转成base64的方法
let self = this;
fr.onload = function () {
// base64是异步的转换，通过onload方法获得转换结果
self.imgbase64 = fr.result// 直接将转换结果赋值给img的src，设置src的大小即可获得浓缩图
console.log(fr.result)// 打印结果见下图一
}
},
async submit() {
// 这部分的代码后面讲
let _formData = new FormData();
_formData.append("user", "asdasd");
_formData.append("file", _fileObj)
axios.post("/xx", _formData);
}
}
}
}
</script>

复制代码

<form action="xxx" method="post">默认情况下提交为query参数</from>
<form action="xxx" method="post" enctype="multipart/form-data">enctype指定提交为formData</from>

复制代码

async submit() {
let _formData = new FormData();
_formData.append("user", "asdasd");
_formData.append("file", _fileObj)
axios.post("/xx", _formData);
}

复制代码

<template>
<div>
<input type="file" name="file" @change="fileChange" multiple />
<span v-for="item in imgList">{{ item.name }}</span>
<button @click="submit">提交</button>
</div>
</template>
<script>
import axios from "axios"
import { fstat } from "fs";
let _fileObj;
export default {
name: 'HelloWorld',
data() {
return {
imgList: [],
}
},
methods: {
fileChange(e) {
//多文件上传
// multiple的多文件上传其实很不友好，需要用户在选择文件时按住ctrl多选，否则就会变成单选
// 所以使用imgList数组将用户每次选择的内容都push进去
if (e.target.files.length > 1) {
this.imgList.concat(e.target.files)
} else {
this.imgList.push(e.target.files[0]);
}
//切片上传
_fileObj = e.target.files[0]
},
async submit() {
// 遍历，一个一个上传
this.imgList.forEach((item) => {
let _formData = new FormData();
_formData.append(item.name + "file", item)
axios.post("/xx", _formData);
})
}
}
}
</script>

复制代码

<template>
<div>
<input type="file" name="file" @change="fileChange" multiple />
<div>{{ precent }}%</div>
<button @click="submit">提交</button>
</div>
</template>
<script>
import axios from "axios"
import { fstat } from "fs";
let _fileObj;
export default {
name: 'HelloWorld',
data() {
return {
precent: 0
}
},
methods: {
fileChange(e) {
//切片上传，在上传的时候进行切片，文件改变时只赋值
_fileObj = e.target.files[0]
},
async submit() {
let size = 2 * 1024 * 1024;// 每次切片的大小，片为2m
let fileSize = _fileObj.size;
let current = 0;// 当前已经传了多少
// 断点续传，永久记录中断的地方，下次上传时直接从断点开始传
//localStorage.setItem(_fileObj.name, current);
while (current < fileSize) {
let _formData = new FormData();
_formData.append(_fileObj.name, _fileObj.slice(current, current + size))
await axios.post("http://localhost:4000/upload",_formData)
// 进度条可以用axios的onUploadProgress方法，且发送切片时可以并行发送请求，后续可以自行优化
this.precent = Math.min((current / fileSize) * 100, 100)
current += size;
}
}
}
}
</script>

复制代码

<template>
<div class="home">
<!-- 如果是react，则使用该组件
<fileviews fileType="指定预览的文件类型" fielPath="路径"></fileviews>
-->
<vueofficeExcel v-if="excelSrc" :src="excelSrc" style="height:500px"></vueofficeExcel>
<button @click="createExcel">创建</button>
<input type="file" @change="change" />
<button @click="loadExcel">加载</button>
<div class="excel-content" v-html="excelHTML"></div>
<table ref="excelTable">
<thead>
<tr>
<td>科目</td>
<td>人数</td>
<td>平均分</td>
</tr>
</thead>
<tr>
<td rowspan="3">数学</td>
<td>90</td>
<td>86</td>
</tr>
<tr>
<td>85</td>
<td>82</td>
</tr>
<tr>
<td>78</td>
<td>32</td>
</tr>
</table>
</div>
</template>
<script>
//1,本地选择-》读取为前端html和数据对象
//2，请求-》读取为前端html和数据对象
//1,把前端的一个table dom转化为excel
//2,把一个前端对象转化为excel
import axios from "axios";
import vueofficeExcel from "@vue-office/excel";// 由于使用xlsx库进行预览时，预览的excel很原生，很丑，需要我们自己写样式，所以可以使用@vue-office/excel组件，他的预览功能和原生excel一样，假如我们在excel中设置了样式，vueofficeExcel也会展示出来
// 与此相似的还有"@vue-office/docx"、"@vue-office/pdf"，他们定义了不同的预览方式
// 如果使用的是react框架，则使用react-file-viewer，该组件支持很多种类型的预览，不管是word、excel还是ppt都使用这一个组件进行预览
// 他也是一个组件，引入注册后直接使用
import "@vue-office/excel/lib/index.css"
import { read, writeFile, utils } from "xlsx"// xlsx是函数式编程
export default {
name: 'Home',
components: {// 注册
vueofficeExcel
},
data() {
return {
excelHTML: "",
excelSrc: ""
}
},
methods: {
loadExcel() {
axios.get("http://localhost:8000/download", { responseType: "blob" }).then((res) => {
console.log(res.data);
res.data.arrayBuffer().then((res) => {
const wb = read(res);
const sheet1 = wb.Sheets.Sheet1
const _data = utils.sheet_to_json(sheet1);
const _html = utils.sheet_to_html(sheet1);
this.excelHTML = _html
})
})
},
createExcel() {
let data = [
{ name: "张三", id: 100, score: 99 },
{ name: "张四", id: 200, score: 99 },
{ name: "张五", id: 300, score: 99 }
]
//转化data数组
const ws = utils.json_to_sheet(data);// 将前端的数据转换为sheet
const wb = utils.book_new();// 创建空的excel文件，即book对象
utils.book_append_sheet(wb, ws, "people");// 将sheet表加入excel（book对象），并给这个sheet表命名为people
writeFile(wb, "test1.xlsx");// 浏览器下载excel，并将其命名为test1.xlsx
//转化table dom
const tableDom = this.$refs.excelTable;// 获取table的dom元素
const tableWs = utils.table_to_sheet(tableDom);// 将dom元素转换为sheet，也可以用table_to_book()直接将其转换为book，然后使用writeFile
const wb2 = utils.book_new();// 创建book对象，即excel
utils.book_append_sheet(wb2, tableWs, "sheet1");// 将sheet表加入excel（book对象），并给这个sheet表命名为sheet1
writeFile(wb2, "tableTest.xlsx");// 浏览器下载excel，并将其命名为tableTest.xlsx
//const wb2=utils.table_to_book(tableDom);
},
change(e) {
let _file = e.target.files[0]// e.target.files[0]拿到的就是blob文件流
const fr = new FileReader();// FileReader用于将文件流读取为你想要的格式
fr.readAsDataURL(_file);// 将文件流读取为base64
fr.onload = (e) => {
// 转换完成后获取转换结果
this.excelSrc = e.target.result;
}
/*_file.arrayBuffer().then((res) => {// arrayBuffer()对象本身会返回一个promise
// 将blob文件流转换成arrayBuffer，res转换出来的内容
const wb = read(res);// 读取arrayBuffer，生成一个book对象
const sheet1 = wb.Sheets.Sheet1// 从Sheets中取出Sheet1这张表
const _data = utils.sheet_to_json(sheet1);// 将Sheet1表转换为json
const _html = utils.sheet_to_html(sheet1);// 将Sheet1表转换为html
this.excelHTML = _html// 需要自己给表格写样式
})*/
}
}
}
</script>
<style>
.excel-content table {
border-collapse: collapse
}
.excel-content td {
border: 1px solid black;
}
</style>

复制代码

<template>
<div class="home">
<input type="file" @change="change" />
<div ref="docxPreview"></div>
</div>
</template>
<script>
import vueofficedocx from "@vue-office/docx";
import { renderAsync } from "docx-preview"
import axios from "axios";
import PizZip from 'pizzip'
import Docxtemplater from 'docxtemplater'// 将word里面的内容作为模版，将html中的数据渲染进去。他接收的的内容是经过压缩的内容，所以还需引入pizzip
import { saveAs } from 'file-saver'// 用于保存文件，你给他一个文件流，他可以把这个文件流作为一个文件导出出来，不仅仅用于word
export default {
name: 'Home',
data() {
return {
wordPath: ""
}
},
components: {
vueofficedocx
},
methods: {
change(e) {
/*let _file = e.target.files[0]
const fr = new FileReader();
fr.readAsDataURL(_file);
fr.onload = (e) => {
this.wordPath = e.target.result;
}*/
//let _file = e.target.files[0];
//blob,arrayBuffer
//renderAsync(_file, this.$refs.docxPreview);// renderAsync接收blob/arrayBuffer，并将其渲染到指定dom中进行预览
let data = {
student: [
{ name: "张三", id: 100, score: 99 },
{ name: "张四", id: 200, score: 99 },
{ name: "张五", id: 300, score: 99 }
]
}
let _file = e.target.files[0];
_file.arrayBuffer().then((res) => {
let zip = new PizZip(res);// PizZip只能压缩arrayBuffer，所以需要将blob转成arrayBuffer
const doc = new Docxtemplater(zip);
doc.setData(data)//设置数据
doc.render();// 渲染
const out = doc.getZip().generate({
type: "blob",
mimeType:
"application/vnd.openxmlformats-officedocument.wordprocessingml.document"// 指定word文档的类型
})// 渲染完成的二进制流
saveAs(out, "test1.docx")// 保存二进制流并将其命名为test1.docx
})
}
}
}
</script>
<style>
.excel-content table {
border-collapse: collapse
}
.excel-content td {
border: 1px solid black;
}
</style>

复制代码