9行代码实现图片上传和预览(自定义按钮上传)

结果展示：

默认展示

2.点击按钮后，选择图片文件
图片预览

首先我们定义一个type为file的input，并将它隐藏，绘制一个button，在按钮点击事件中触发input的点击事件。

<input
id="file-upload"
type="file"
accept="image/*"
name="picture"
style="display: none"
/><button @click="getFile">上传头像
</button>

const getFile = () => {document.getElementById('file-upload').click()
}

现在点击按钮，我们可以看到文件选择框了。

接下来在input上添加change事件，在event中取到file对象，实现预览和上传。

<input
...
@Change="preview"
/>

let imgUrl = ref('')
let imgFile = ref(null)
const preview = (e) => {imgUrl.value = window.URL.createObjectURL(e.target.files[0])imgFile = e.target.files[0]
}

window.URL.createObjectURL函数可以创建一个file文件的访问url，url用法和普通url相同，根据此url可以实现图片预览，我们可以将该url赋给img标签。

<img v-if="imgUrl" class="img" :src="imgUrl" alt="" />

而file文件可以提交给服务端储存。

下面给出我的完整代码。

<template><div class="flex"><div class="img-bar"><img v-if="imgUrl" class="img" :src="imgUrl" alt="" /><div v-else class="flex img"><i class="iconfont icon-drag icon-Quit" /></div><inputid="file-upload"class="file-upload img"type="file"accept="image/*"name="picture"style="display: none"@Change="preview"/></div><button class="btn-primary plain hand" @click="getFile"><i class="iconfont icon-drag icon-Quit" />上传头像</button></div>
</template>
<script lang="ts" setup>
let { imgUrl, imgFile, getFile, preview } = (() => {let imgUrl = ref('')let imgFile = ref(null)const getFile = () => {document.getElementById('file-upload').click()}const preview = (e) => {imgUrl.value = window.URL.createObjectURL(e.target.files[0])imgFile = e.target.files[0]}return { imgUrl, imgFile, getFile, preview }
})()
</script>
<style lang="scss" scoped>
...
</style>

9行代码实现图片上传和预览(自定义按钮上传)相关推荐

pdf上传及预览；file上传pdf文件及预览；vue上传pdf文件及预览；vue-pdf预览pdf文件
需求:上传pdf文件,并点击可以打开预览.使用input的file功能即可完成,预览只需要跳转到pdf的url地址即可.还可以配合vue-pdf直接预览,点击看这篇. 以下代码可直接复制使用!!!有效 ...
ajax js图片上传到php,Ajax上传并预览图片（附代码）
这次给大家带来Ajax上传并预览图片(附代码),Ajax上传并预览图片的注意事项有哪些,下面就是实战案例,一起来看一下. 1. 直接上最简单的一种 ajax 异步上传图片,并预览 html: 图片上 ...
微信小程序删除服务器图片,微信小程序实现图片上传放大预览删除代码
本文实例为大家分享了微信小程序图片上传放大预览的具体代码,供大家参考,具体内容如下 image.js代码: = 9) { this.setData({ lenMore: 1 }); setTimeou ...
DevExpress控件使用系列--ASPxUploadControl（图片上传及预览）
1.控件功能列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例 2.1 ASPxImage http:// ...
vue本地上传并预览php,vue.js 实现图片本地预览裁剪压缩上传功能
以下代码涉及 Vue 2.0 及 ES6 语法. 目标纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还 ...
html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
[ASP.NET2.0] asp.net在ie7中使用FileUpload上传前预览图片 [ZT]
asp.net在ie7中使用FileUpload上传前预览图片因为安全性问题,IE7禁用了image控件引用本地图片,为了这个问题郁闷了好几天,终于找到了解决方案,好东西要与大家分享,代码如下: 此 ...
php+jquery实现图片上传预览_和拖动位置值,PHP教程：thinkphp jquery实现图片上传和预览效果...
<PHP教程:thinkphp jquery实现图片上传和预览效果>要点: 本文介绍了PHP教程:thinkphp jquery实现图片上传和预览效果,希望对您有用.如果有疑问,可以联系我 ...
JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果很早以前在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

9行代码实现图片上传和预览(自定义按钮上传)

9行代码实现图片上传和预览(自定义按钮上传)

9行代码实现图片上传和预览(自定义按钮上传)相关推荐

最新文章

热门文章