一、上传
先将按钮画出来，input 使用 display: none 隐藏，通过点击按钮触发 input。
<div class="button" @click="clickUploader">点击上传</div>
<input type="file" style="display: none" ref="uploader" accept="image/*" capture="camera" @change="fileChange" />
注意：capture="camera" 表示只能使用拍照，在移动端可以使用。
二、回显
回显有两种方法，一种是上传到服务器，再将从服务器返回的文件流或图片地址展示出来；另一种是将图片转成 base64 ，再将 base64 展示出来。
base64 回显
clickUploader() {
this.$refs.uploader.click();
},
fileChange(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function () {
const base64 = reader.result;
sessionStorage.setItem('picture', base64)
};
reader.readAsDataURL(file);
e.target.value = null; // 清除 input 中的值
},
<template>
<img :src="picture" alt="">
</template>
<script>
export default {
computed: {
picture() {
return sessionStorage.getItem('picture')
}
},
}
</script>
上传至服务器回显
考虑到上传文件是会多次使用的，所以把核心部分抽离出来，单独写到一个文件中。以下代码是用 TypeScript 写的，如使用 JavaScript 开发，去除类型断言即可。
utils/file.ts
import {
upload } from "@/api/file.js";
/**
* @description 文件上传
* @param file 文件
* @returns 接口返回数据
*/
export function fileUpload(file: string | Blob) {
const params = new FormData()
params.append('file', file)
return new Promise((resolve, reject) => {
upload(params)
.then((res: any) => {
resolve(res)
})
.catch((err: any) => {
reject(err)
})
})
}
上传页面
<template>
<div class="button" @click="clickUploader">点击上传</div>
<input type="file" style="display: none" ref="uploader" accept="image/*" capture="camera" @change="fileChange" />
</template>
<script>
import {
fileUpload } from '@/utils/file'
const clickUploader = () => {
this.$refs.uploader.click();
},
const fileChanger = (e) => {
this.fileUpload(e.target.files[0]).then((res) => {
sessionStorage.setItem('picture', res.data.url)
});
e.target.value = null; // 清除 input 中的值
},
</script>
展示页面
<template>
<img :src="picture" alt="">
</template>
<script>
export default {
computed: {
picture() {
return sessionStorage.getItem('picture')
}
},
}
</script>
END