使用Vue封装图片上传组件,使用原生HTML中input标签

韶华若不负

已于 2023-04-25 16:04:31 修改

阅读量318

点赞数 2

分类专栏： Vue 文章标签： vue.js

于 2023-04-25 15:19:06 首次发布

本文链接：https://blog.csdn.net/qq_59456579/article/details/130365914

版权

Vue 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

该组件使用Vue.js实现了一个图片上传的功能，包括图片预览和删除。图片存储在`images`数组中，`uploadImage`方法用于添加图片，限制最多可上传9张，而`deleteImage`方法则用于从数组中删除指定索引的图片。样式设计采用了flex布局，提供良好的用户体验。

摘要由CSDN通过智能技术生成

代码实现：

<template>
  <div class="image-uploader">
    <div v-for="(image, index) in images" :key="index" class="image-preview">
      <img :src="image" alt="Preview" />
      <button @click="deleteImage(index)">Delete</button>
    </div>
    <div class="image-upload">
      <label>
        <input type="file" @change="uploadImage" />
        <span>+</span>
      </label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: []
    };
  },
  methods: {
    uploadImage(event) {
      const files = event.target.files;
      for (let i = 0; i < files.length && this.images.length < 9; i++) {
        const reader = new FileReader();
        reader.readAsDataURL(files[i]);
        reader.onload = () => {
          this.images.push(reader.result);
        };
      }
    },
    deleteImage(index) {
      this.images.splice(index, 1);
    }
  }
};
</script>

<style scoped>
.image-uploader {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.image-preview {
  position: relative;
  margin: 10px;
  width: 150px;
  height: 150px;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-preview button {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 5px;
  border: none;
  background-color: rgba(255, 255, 255, 0.8);
  color: #f00;
}

.image-upload {
  position: relative;
  margin: 10px;
  width: 150px;
  height: 150px;
  background-color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-upload label {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 48px;
  color: #999;
  transition: all 0.3s;
}

.image-upload label:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

.image-upload label span {
  margin-top: -10px;
}

.image-upload input[type="file"] {
  display: none;
}
</style>

思路：

组件中使用了一个images数组来保存上传的图片，uploadImage方法用来添加图片，deleteImage方法用来删除图片。组件中展示的图片预览和删除按钮都是通过v-for指令遍历images数组生成的。

为了保证最多只能上传九张图片，uploadImage方法中添加了一个判断，当images数组中的元素个数达到了九个或者文件列表中的文件已经全部添加完毕时，上传操作就会停止。同时，在HTML中也限制了只能添加一个文件的输入框。

组件的样式采用了flex布局，并使用了CSS3的过渡效果来增强