vue实现上传图片

实现上传图片其实很简单，本文章是使用的input的file属性来实现上传图片的。

HTML代码:

<div class="upload-img">
                    <ul class="upload-list">
                      <li v-for="(item, index) in picList" :key="index">
                        <img :src="item" alt="" />
                        <div class="caozuo">
                          <i
                            @click="deleteImg(item, index)"
                            class="el-icon-delete"
                          ></i>
                        </div>
                      </li>

                      <li
                        style="border: 1px solid black"
                        class="add-img el-icon-plus"
                      >
                        <input @change="fileChange" type="file" />
                        <i v-if="!loading" class="iconfont icon-tianjia"></i>
                        <i v-else class="iconfont loading icon-jiazai"></i>
                      </li>
                    </ul>
                    <div
                      class="preview-box"
                      v-if="ispreview"
                      @click.self="ispreview = false"
                    >
                      <img :src="previewItem" alt="" />
                    </div>
                  </div>

JS代码:

data(){
	return{
      picList:[],//这里是要显示的图片集合
      loading: false, //加载效果
      ispreview: false, //是否打开预览
      ary[]//上传的图片集合
      }
 },
 methods:{
fileChange(e){
  var file=e.target.files[0];//要上传的图片
  this.ary.push(file);//每次上传的图片都push到一个数组里
  //想要给后台发送图片可以使用formData来实现
  var formdata=new FormData();
  formdata.append('图片的字段名',file);
  //在这里发送接口
},
    deleteImgq(item, index) {
      this.picList.splice(index, 1);
      //实现点击删除图片
    }
}

…以上就是实现一个简单上传图片的代码了，有什么问题可以随时问我~