vue 多张图片上传

最新推荐文章于 2024-07-05 11:44:35 发布

周家大小姐.

最新推荐文章于 2024-07-05 11:44:35 发布

阅读量1.2k

点赞数 1

分类专栏： vue2.0 周家大小姐

本文链接：https://blog.csdn.net/qq_40190624/article/details/89436095

版权

本文介绍如何在Vue中实现多张图片的上传功能。通过HTML、JavaScript和CSS代码示例，展示了一个基本的图片上传组件的实现。当需要将此功能拆分为父子组件时，提供了子组件和父组件的交互方式，以及最终的展示效果。

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

html:

 <div class="upload">
      <div class="upload_warp" style="border: 1px solid white;">
        <div class="upload_warp_img" v-if="imgList.length!=0">
          <div class="upload_warp_img_div" v-for="(item,index) of imgList">
            <div class="upload_warp_img_div_top">
              <div class="upload_warp_img_div_text">{
  {item.file.name}}</div>
              <img src="./img/icon-ch.png" class="upload_warp_img_div_del" @click="fileDel(index)">
            </div>
            <img :src="item.file.src">
          </div>
        </div>
        <div v-else>
          <span>暂无图片</span>
        </div>
      </div>
      <input
        @change="fileChange($event)"
        type="file"
        id="upload_file"
        multiple
        style="display: none"
      >
      <div class="upload_warp_left" @click="fileClick">
        <button class="btn btn-success">上传图片</button>
      </div>
    </div>
    <button @click="save">保存</button>

js:

 data() {
    return {
 imgList: [],
}
},
methods: {
    fileClick() {//点击上传图片
      document.getElementById("upload_file").click();
    },
    fileChange(el) {
      console.log(el)
      this.fileList(el.target.files);
      el.target.value = "";
    },
    fileList(files) {
      for (let i = 0; i < files.length; i++) {
        this.fileAdd(files[i