【仅记录】纯前端上传图片并小图预览展示，不走后端

一、写在前面

次方法用的是input上传的方式外加对于上传按钮的样式修改等，来实现图片上传展示。

二、最终效果展示

三、代码实现（前端使用vue3）

1、templete部分代码

<div class="col-12 col-md-6 relative-position">
  <div class="row">
    <label class="t-form-label text-left">模型图片</label>
    <q-btn label="上传" color="primary" icon="file_upload" unelevated @click="uploadFile">
    </q-btn>
    <input ref="fileUpload" type="file" accept="image/*" @change="onFileChange" style="display:none" />
  </div>
  <div v-if="previewImage" class="row">
    <label class="t-form-label text-left"></label>
    <div class="upload-image">
    <img v-if="previewImage" :src="previewImage" class="col image-style" />
  </div>
</div>

2、script部分代码

// 图片上传预览方法
const previewImage = ref(null)
const fileUpload = ref(null)
const uploadFile = () => {
  fileUpload.value.click()  // 触发选择文件的行为
}
const onFileChange = (event) => {
  const file = event.target.files[0]
  if (!file) return

  const reader = new FileReader()
  reader.onload = (e) => {
    previewImage.value = e.target.result
  }
  reader.readAsDataURL(file)
}

3、样式修改

<style scoped>
.image-style {
  width: auto;
  height: 75px;
  object-fit: contain;
}

.upload-image {
  width: 75px;
  height: 75px;
  text-align: center;
  line-height: 50px;
  border-radius: 4px;
  position: relative;
  margin-right: 4px;
  margin-top: 4px;
  /* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); */
}
</style>

4、完成上述步骤后的效果展示

四、在图片上面加上“预览”“删除”等小按钮图标

1、预览、删除按钮templete部分代码

<div v-if="previewImage" class="upload-box-cover" >
  <q-icon name="zoom_in" @click="handleView"></q-icon>
  <q-icon name="delete" @click="handleRemove"></q-icon>
</div>

预览的弹窗：

<!-- 查看大图 -->
<div class="big-pic" v-if="bigPicSrc" @click="bigPicSrc = ''">
  <img class="" :src="bigPicSrc" />
</div>

2、预览、删除按钮script部分代码

const bigPicSrc = ref(null)
// 查看大图
const handleView = (index) => {
  bigPicSrc.value = previewImage.value
}
// 删除上传的案例图
const handleRemove = (index) => {
  previewImage.value = null
}

3、预览、删除按钮浮动到图片上展示的样式

.upload-image .upload-box-cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* background: rgba(0, 0, 0, 0); */
}
.upload-box-cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* background: rgba(0, 0, 0, 0.3); */
}
.upload-box-cover i.q-icon.notranslate.material-icons {
  font-size: 20px;
  cursor: pointer;
  margin: -25px 8px 0 0px;
  color: #fdfdfd;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
}

.big-pic {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 50;
}
.big-pic img {
  position: absolute;
  width: 700px;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

五、总结

1、上述的所有代码展示

<div class="col-12 col-md-6 relative-position">
  <div class="row">
    <label class="t-form-label text-left">模型图片</label>
    <q-btn label="上传" color="primary" icon="file_upload" unelevated @click="uploadFile">
    </q-btn>
    <input ref="fileUpload" type="file" accept="image/*" @change="onFileChange" style="display:none" />
  </div>
  <div v-if="previewImage" class="row">
    <label class="t-form-label text-left"></label>
    <div class="upload-image">
      <img v-if="previewImage" :src="previewImage" class="col image-style" />
      <div v-if="previewImage" class="upload-box-cover" >
        <q-icon name="zoom_in" @click="handleView"></q-icon>
        <q-icon name="delete" @click="handleRemove"></q-icon>
      </div>
    </div>
  </div>
</div>

// 图片上传预览方法
const bigPicSrc = ref(null)
const previewImage = ref(null)
const fileUpload = ref(null)
const uploadFile = () => {
  fileUpload.value.click()  // 触发选择文件的行为
}
const onFileChange = (event) => {
  const file = event.target.files[0]
  if (!file) return

  const reader = new FileReader()
  reader.onload = (e) => {
    previewImage.value = e.target.result
  }
  reader.readAsDataURL(file)
}
// 查看大图
const handleView = (index) => {
  bigPicSrc.value = previewImage.value
}
// 删除上传的案例图
const handleRemove = (index) => {
  previewImage.value = null
}

<style scoped>
.image-style {
  width: auto;
  height: 75px;
  object-fit: contain;
}

.upload-image {
  width: 75px;
  height: 75px;
  text-align: center;
  line-height: 50px;
  border-radius: 4px;
  position: relative;
  margin-right: 4px;
  margin-top: 4px;
  /* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); */
}
.upload-image .upload-box-cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* background: rgba(0, 0, 0, 0); */
}
.upload-box-cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* background: rgba(0, 0, 0, 0.3); */
}
.upload-box-cover i.q-icon.notranslate.material-icons {
  font-size: 20px;
  cursor: pointer;
  margin: -25px 8px 0 0px;
  color: #fdfdfd;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
}

.big-pic {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 50;
}
.big-pic img {
  position: absolute;
  width: 700px;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

</style>

2、问题：目前这样仅适用于“单图片上传”，没有实现多图片上传

六、相关参考

1、这里有位大大写的是多图上传的，需要的可以参考一下这个

记录用vue用原生input写图片上传 - 简书