formData 传输
转为base64传输
files: 通过input 标签读取过来的文件对象,是blob的子类
<script setup>
const change = (e) => {
console.log(e.target.files[0]);
};
</script>
<template>
<div>
<input type="file" name="file" @change="change" />
</div>
</template>
<style scoped>
不可变的二进制内容,包含很多操作方法
files 对象转blob 对象
<script setup>
const change = (e) => {
const _files = e.target.files[0];
const _blobFiles = new Blob([_files]);
console.log(_blobFiles);
};
</script>
<template>
<div>
<input type="file" name="file" @change="change" />
</div>
</template>
<style scoped>
</style>
blob 对象转 files对象
<script setup>
const change = (e) => {
const _files = e.target.files[0];
const _blobFiles = new Blob([_files]).slice(0, 500); // 截取了长度
const _fileToBlob = new File([_blobFiles], "test.text");
console.log(_fileToBlob);
};
</script>
<template>
<div>
<input type="file" name="file" @change="change" />
</div>
</template>
<style scoped>
</style>
多用于把文件读取为某种形式,如base64 , text文本
<script setup>
const change = (e) => {
const _files = e.target.files[0];
const _blobFiles = new Blob([_files]);
const _blobToFile = new File([_blobFiles], "test.text");
console.log(_blobToFile );
let fs = new FileReader();
fs.readAsDataURL(_blobToFile );
fs.onload = function () {
console.log(11, fs.result);
};
};
</script>
<template>
<div>
<input type="file" name="file" @change="change" />
</div>
</template>
图片截取功能实现
<script setup>
let url = ref("");
const change = (e) => {
const _files = e.target.files[0];
const _blobFiles = new Blob([_files]).slice(0, 5000);
const _fileToBlob = new File([_blobFiles], "test.text");
console.log(_fileToBlob);
let fs = new FileReader();
fs.readAsDataURL(_fileToBlob);
fs.onload = function () {
console.log(11, fs.result);
url.value = fs.result;
};
};
</script>
<template>
<div>
<input type="file" name="file" @change="change" />
<img :src="url" />
</div>
</template>
<style scoped>
</style>
formData 二进制文件上传
<script setup>
import Axios from "axios";
let url = ref("");
let _filesObj = "";
const change = (e) => {
const _files = e.target.files[0];
_filesObj = _files;
};
const submit = () => {
let _formData = new FormData();
_formData.append("name", "jack");
_formData.append("file", _filesObj);
Axios.post("/PostJsonData.json", _formData).then((response) => {
console.log(response);
});
};
</script>
<template>
<div>
<input type="file" name="file" @change="change" />
<button @click="submit">提交</button>
<img :src="url" />
</div>
</template>
<style scoped>
</style>
文件转换之间的关系
多文件上传案例
<script setup>
import Axios from "axios";
import { reactive } from "vue";
let url = ref("");
let imgList = reactive([]);
const change = (e) => {
// 多选
if (e.target.files.length > 1) {
let arr = Array.from(e.target.files);
arr.forEach((x) => {
imgList.push(x);
});
} else {
// 单个选择
imgList.push(e.target.files[0]);
}
};
const submit = () => {
imgList.forEach((x) => {
let _formData = new FormData();
_formData.append(x.name + "file", x);
Axios.post("/PostJsonData.json", _formData).then((response) => {
console.log(response);
});
});
};
</script>
<template>
<div>
<input type="file" name="file" @change="change" multiple />
<button @click="submit">提交</button>
<div v-for="item in imgList" :key="item.name">
<div>{{ item.name }}</div>
</div>
<img :src="url" />
</div>
</template>
<style scoped>
</style>
切片上传
<script setup>
import Axios from "axios";
import { reactive } from "vue";
let url = ref("");
let _fileObj = reactive({});
let percent = ref(0);
const change = (e) => {
_fileObj = e.target.files[0];
};
const submit = () => {
let count = 0;
let size = 2 * 1024 * 1024;
let allSize = _fileObj.size;
while (count < allSize) {
let _formData = new FormData();
_formData.append(_fileObj.name, _fileObj.slice(count, count + size));
Axios.post("http://127.0.0.1:5173/app/upload", _formData).then(
(response) => {
console.log(response);
}
);
count += size;
percent = (count / allSize) * 100;
}
};
</script>
<template>
<div>
<input type="file" name="file" @change="change" multiple />
<button @click="submit">提交</button>
<div>{{ percent }}%</div>
<img :src="url" />
</div>
</template>
<style scoped>
</style>