一、文件上傳
<template>
<div>
<input type="file" name="file" @change="fileChange" />
<button @click="submit">提交</button>
</div>
</template>
<script setup>
function fileChange(e) {
// e.target.files[0]表示獲取到索引為0的文件
let file = e.target.files[0];
console.log(file);
if (file.size > 1024 * 1024 * 10) {
alert("文件大小不能超過(guò)10M");
return;
}
if (file.type !== "video/mp4") {
alert("文件類型必須是mp4");
return;
}
}
function submit() {}
</script>
可以把File 類型 轉(zhuǎn)換為 Blob 類型，因?yàn)?File 是Blob的子類
console.log(new Blob([file]));
二、文件切片（利用Blob中的slice()方法 ）
三、FileReader()的使用
Blob是不可修改也是無(wú)法讀取里面的內(nèi)容的。但是Filereader就提供了讀取Blob里面內(nèi)容的方法。
1.做縮略圖用readAsDataURL
<template>
<div>
<input type="file" name="file" @change="fileChange" />
<button @click="submit">提交</button>
</div>
</template>
<script setup>
function fileChange(e) {
// e.target.files[0]表示獲取到索引為0的文件
let file = e.target.files[0];
let fr = new FileReader();
// 做縮略圖用readAsDataURL
fr.readAsDataURL(file);
//fr 讀取完成后執(zhí)行
fr.onload = () => {
console.log(fr.result);
}
}
function submit() {}
</script>
給圖片顯示一下
可以利用切片來(lái)實(shí)現(xiàn)上傳半張圖片的效果
2. 也可以做文本預(yù)覽（利用readAsText）方式和上面的步驟差不多。
四、多文件上傳（給input添加multiple 屬性）
前端最常見(jiàn)的就是添加一個(gè)multiple 屬性，這樣在上傳的時(shí)候只要按住Ctrl 就可以選擇多個(gè)文件了，這樣的方式對(duì)用戶不夠友好，因?yàn)橛行┯脩羰遣恢腊醋trl 可以選擇多個(gè)文件的，一般來(lái)說(shuō)，用戶只會(huì)一個(gè)文件，一個(gè)文件來(lái)上傳的。
用戶不按Ctrl 來(lái)選擇多個(gè)文件，而是一個(gè)一個(gè)文件上傳 就需要我們自己來(lái)收集數(shù)據(jù)了。一般定義一個(gè)數(shù)組來(lái)接收，看下面動(dòng)圖就是符合用戶習(xí)慣的
五、文件傳給后端的方式
圖片可以通過(guò)轉(zhuǎn)成Base64 的方式，文件一般使用 formData來(lái)進(jìn)行傳輸，可以說(shuō)，formData 就是一個(gè)載體，負(fù)責(zé)裝載文件
<template>
<div>
<input type="file" name="file" @change="fileChange" multiple/>
<button @click="submit">提交</button>
<div v-for="item in imgList" >{{ item.name }}</div>
</div>
</template>
<script setup>
import axios from 'axios'
import { ref } from 'vue'
const imgbase64 = ref('');
const imgList = ref([]) //多文件上傳
// 定義全局變量，用來(lái)存儲(chǔ)文件對(duì)象
// 方便后面的submit方法使用
let _fileObj;
function fileChange(e) {
//多文件上傳
//結(jié)合 multiple屬性，可以上傳多個(gè)文件，
//但需要按住ctrl鍵來(lái)選擇多個(gè)文件，不符合用戶習(xí)慣
let files = e.target.files;
console.log(files);
_fileObj = files;
// 如果用戶使用ctrl鍵選擇多個(gè)文件，需要用concat合并
if (e.target.files.length > 1) {
imgList.value.concat(e.target.files)
//用戶一個(gè)一個(gè)選擇文件，直接push存儲(chǔ)起來(lái)，符合用戶習(xí)慣
} else {
imgList.value.push(e.target.files[0])
}
}
function submit() {
// 文件要傳遞給后端的話，必須需要用FormData。
// 圖片可以直接用base64傳遞
let _formData = new FormData();
_formData.append('user', '張三');
_formData.append('file', _fileObj);
axios.post('/XXX',_formData)
}
</script>
上面是提交單個(gè)文件的，如果想要提交多個(gè)文件，只需要遍歷即可
把 下面的
let _formData = new FormData();
_formData.append('user', '張三');
_formData.append('file', _fileObj);
axios.post('/XXX', _formData)
改成
//多文件上傳,遍歷數(shù)組，每個(gè)文件都要用FormData包裝一下
imgList.value.forEach((item) => {
let _formData = new FormData();
_formData.append(item.name + 'file', item);
axios.post('/XXX',_formData)
})
六、切片上傳具體實(shí)現(xiàn)
<template>
<div>
<input type="file" name="file" @change="fileChange" multiple />
<div>{{ Percentage }}%</div>
<button @click="submit">提交</button>
<div v-for="item in imgList">{{ item.name }}</div>
</div>
</template>
<script setup>
import axios from "axios";
import { ref } from "vue";
const imgbase64 = ref("");
const imgList = ref([]); //多文件上傳
const Percentage = ref(0); //上傳進(jìn)度
// 定義全局變量，用來(lái)存儲(chǔ)文件對(duì)象
// 方便后面的submit方法使用
let _fileObj;
function fileChange(e) {
// 切片上傳
_fileObj = e.target.files[0];
}
async function submit() {
let size = 2 * 1024 * 1024; //每片2M
let fileSize = _fileObj.size;
let current = 0;
while (current < fileSize) {
let _formData = new FormData();
let fileData = _formData.append(_fileObj.name, _fileObj.slice(current, current + size));
// 這個(gè)接口只是用來(lái)測(cè)試，只有一個(gè)功能，就是返回一個(gè)‘ok’
await axios.post('http://localhost:4000/upload', fileData)
Percentage.value = (current / fileSize * 100)//進(jìn)度條計(jì)算
current += size;
}
Percentage.value=100
}
</script>
server.js文件用來(lái)模擬文件上傳的，需要引入包：
npm i koa koa-cors koa-router
const Koa = require('koa');
const cors = require('koa-cors');
const koarouter = require('koa-router');
const router = new koarouter();
const app = new Koa();
app.use(cors());
router.post('/upload', async (ctx, next) => {
ctx.body ='ok'
})
router.post('/upload', async (ctx, next) => {
ctx.body ='ok'
})
app.use(router.routes());
app.listen(4000);
啟動(dòng)服務(wù)器：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-419313.html
node server.js
演示效果
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-419313.html
到了這里，關(guān)于前端--文件上傳--文件切片--利用FileReader()中的readAsDataURL()做縮略圖--多文件上傳--formData--切片上傳實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
