获取本地文件
<template>
<a-card title="input 获取文件" style="width: 300px">
<input type="file" ref="fileRef" multiple @change="handleFileChange" />
<ul>
<li v-for="(file, index) of fileList" :key="index">{{ file.name }}</li>
</ul>
</a-card>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
data() {
return {
fileList: [],
};
},
methods: {
handleFileChange() {
const fileRef = this.$refs.fileRef;
this.fileList = fileRef?.files || [];
console.log(fileRef, this.fileList);
},
},
});
</script>
拖拽
<template>
<a-card title="拖拽 获取文件" style="width: 300px">
<div @dragover="handleDragover" @drop="handleDrag" class="drag-area">
拖拽到这
</div>
<ul>
<li v-for="(file, index) of fileList" :key="index">{{ file.name }}</li>
</ul>
</a-card>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
data() {
return {
fileList: [],
};
},
methods: {
handleDrag(evt) {
evt.preventDefault();
this.fileList = evt?.dataTransfer?.files || [];
},
handleDragover(evt) {
evt.preventDefault();
},
},
});
</script>
showOpenFilePicker
兼容性

<template>
<a-card title="filePicker 获取文件" style="width: 300px">
<a-button type="primary" @click="handleOpenFilePicker">打开文件</a-button>
<img
v-for="(dataUrl, index) of imgList"
:key="index"
width="200"
height="200"
:src="dataUrl"
alt=""
/>
</a-card>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
data() {
return {
imgList: [],
};
},
methods: {
async handleOpenFilePicker() {
const pickerOpts = {
types: [
{
description: "Images",
accept: {
"image/*": [".png", ".gif", ".jpeg", ".jpg"],
},
},
],
excludeAcceptAllOption: true,
multiple: true,
};
const fileHandlers = await window.showOpenFilePicker(pickerOpts);
this.imgList = [];
for (const fileHandle of fileHandlers) {
// 获取文件内容
const fileData = await fileHandle.getFile();
const fr = new FileReader();
fr.readAsDataURL(fileData);
fr.onload = () => this.imgList.push(fr.result);
}
},
},
});
</script>
保存文件
兼容性

<template>
<a-card title="保存文件" style="width: 300px">
<a-textarea v-model:value="text" :rows="4" />
<a-button type="dashed" @click="handleSave">保存</a-button>
<a-button type="primary" @click="handleSaveAs">另存为</a-button>
</a-card>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
data() {
return {
text: "",
fileHandler: null,
};
},
methods: {
async showSaveFilePicker() {
const options = {
types: [
{
description: "Test files",
accept: {
"text/plain": [".txt"],
},
},
],
};
this.fileHandler = await window.showSaveFilePicker(options);
return this.fileHandler
},
async handleSave(evt) {
evt.preventDefault();
this.fileHandler = this.fileHandler || await this.showSaveFilePicker()
const writable = await this.fileHandler.createWritable();
await writable.write(this.text);
await writable.close();
},
async handleSaveAs(evt) {
this.fileHandler = null;
await this.handleSave(evt);
},
},
});
</script>
canvas转换图片数据
<template>
<a-card title="canvas转换图片数据" style="width: 300px">
<canvas id="c1" width="200" height="200"></canvas>
</a-card>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
data() {
return {
fileList: [],
};
},
mounted() {
this.drawImage();
},
methods: {
drawImage() {
const c1 = document.getElementById("c1");
const ctx = c1.getContext("2d");
const img = new Image();
img.src = "./img/img.png";
img.onload = function () {
ctx.drawImage(img, 0, 0, 200, 200);
// 该api不接受file协议
const imgData = ctx.getImageData(0, 0, 200, 200);
for (let i = 0; i < imgData.data.length; i += 4) {
imgData.data[i] = 255 - imgData.data[i];
imgData.data[i + 1] = 255 - imgData.data[i + 1];
imgData.data[i + 2] = 255 - imgData.data[i + 2];
imgData.data[i + 3] = 255;
}
ctx.putImageData(imgData, 0, 0);
};
}
},
});
</script>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章