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

Posted 2022-06-21 前端呆头鹅

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

结果展示：

1. 默认展示
   
   2.点击按钮后，选择图片文件
   
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>
         <input
            id="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>