vue上传图片-banner上传（多张）

效果图：

在html中：

<div class="lfzHead">
  <div>首页banner设置</div>
  <el-button type="primary" @click="addBanners">新增(最多5个)</el-button>
</div>

中间的图我们需要用到for循环

<div class="lfzImgs">
  <div
    class="lfzImg"
    v-for="(item,index) in imgList"
    :key="index"
    v-dragging="{ item, list: imgList, group: 'color' }"
  >
    <el-button class="btn" type="primary" @click="removeImg(item,index)">删除</el-button>
    <div class="lfzCenter">
      <el-upload
        class="avatar-uploader"
        action="https://up.qiniup.com/"
        :show-file-list="false"
        :headers="uploader.headers"
        :name="uploader.name"
        :data="uploader.data"
        :limit="uploader.limit.main_thumb"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        accept=".jpg, .png, .gif"
      >
        <img v-if="item.imageUrl" :src="item.imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
    <div style="display:flex;align-items:center">
      <span class="links">链接</span>

      <el-input class="lfzInput" v-model="item.linkUrl" placeholder="请输入链接" show-word-limit></el-input>
    </div>
    <div style="display:flex;align-items:center;margin-top:10px">
      <span class="links">app链接</span>

      <el-input class="lfzInput" v-model="item.applinkUrl" placeholder="请输入链接" show-word-limit></el-input>
    </div>
  </div>
</div>

下面的时间：

<el-row class="views_coupons" :gutter="20">
  <el-col :span="24">
    <div class="tiomes lfzHead">
      <div style="display:flex;align-items:center">
        <span class="links">banner滚动间隔时间:</span>
        <el-input
          class="lfzInput"
          v-model="timeLine"
          placeholder="请输入时间"
          show-word-limit
          style="width:150px"
        >
          <span>s</span>
        </el-input>
        <span class="links" style="color:#666">设置间隔时间范围1S≤间隔时间≤15S</span>
      </div>

      <div class="lfzCenter view_submit" style="margin-top:20px">
        <el-button type="primary" @click="add(1)">保存</el-button>
      </div>
    </div>
  </el-col>
</el-row>

上传图片：
数据模型：

data() {
    return {
      imgList:[],
      timeLine:"",//banner滚动的时间
      uploader:{
        action: "https://up.qiniup.com/",
        headers: {},//设置上传请求头
        name: "file",//上传的文件字段名
        //data上传时附带的额外参数，此时从缓存中取token
        data:{
          token: localStorage.getItem("qiniuToken")
        },
        //limit最大允许上传个数
        limit: {
          main_thumb: 6,
        },
      }
    };
  },

mounted：

mounted() {
  this.onGetUploaderToken();
  this.$dragging.$on("dragged", ({ value }) => {
    console.log(value);
    this.imgList = value.list;
  });
  this.getImgList(1);
},

methods:

//添加按钮
addBanners() {
  if (this.imgList.length < 5) {
    this.imgList.push({
      imageUrl: "",
      linkUrl: "",
      applinkUrl:"",
      siteType: 1
    });
  }
},

图片获取：

 /**
* @description 获取骑牛云token
 * */
onGetUploaderToken: function() {
  get("/sys/merchant/qnToken/hxt-mini-img").then(result => {
    if (result.code === 200) {
      //把token存入缓存中（封装到了storage里面）
      storage.set("qiniuToken", result.data.qnToken, () => {});
      //把token存入缓存中（不使用封装的组件，直接存到缓存里面）
      // localStorage.setItem('qiniuToken', result.data.qnToken);
      this.uploader.data.token = result.data.qnToken;
    }
  });
},
//限制图片的大小和格式
beforeAvatarUpload(file) {
  var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
  const extension =
    testmsg === "jpg" ||
    testmsg === "JPG" ||
    testmsg === "png" ||
    testmsg === "PNG" ||
    testmsg === "gif";
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!extension) {
    this.$message({
      message: "上传图片只能是jpg/png/gif格式!",
      type: "error"
    });
    return false; //必须加上return false; 才能阻止
  }
  if (!isLt2M) {
    this.$message({
      message: "上传文件大小不能超过 2MB!",
      type: "error"
    });
    return false;
  }
  return extension || isLt2M;
},
//文件上传成功时的钩子（让上传的图片显示出来）
handleAvatarSuccess(res, file, fileList) {
  console.log(res);
  console.log(file);
  console.log(fileList);
  for (let i = 0; i < this.imgList.length; i++) {
    if (!this.imgList[i].imageUrl) {
      this.imgList[i].imageUrl = "https://hxt-img.baimokc.com/" + res.key;
      return;
    }
  }
},
//获取banner
getImgList(type) {
  console.log(type);
  let params = {
    siteType: type
  };
  get("/sys/banner/list", params).then(res => {
    if (res.code === 200) {
      if (type == 1) {
        this.imgList = res.data;
        this.timeLine = res.data[0].timeLine;
      } else {
        if (res.data[0]) {
          this.imgLists = res.data[0];
        } else {
          this.imgLists = {
            imageUrl: "",
            linkUrl: "",
            applinkUrl:"",
            siteType: 2
          };
        }
      }
      console.log(this.imgList);
    } else {
      try {
        this.$message.error(res.data);
      } catch {
        this.$message.error(res.msg);
      }
    }
  });
},

删除某一个：

// 删除banner
del(id, type, index) {
   if (id) {
     post("/sys/banner/del?id=" + id).then(result => {
       if (result.code === 200) {
         this.$message.success("删除成功！");
         console.log(this.imgList);
         console.log(this.imgLists);
         if (type == "1") {
           // this.getImgList(1);
           this.imgList.splice(index, 1);
         } else {
           this.getImgList(2);
         }
         console.log(this.imgList);
         console.log(this.imgLists);
       } else {
         try {
           this.$message.error(result.data);
         } catch {
           this.$message.error(result.msg);
         }
       }
     });
   } else {
     if (type == "1") {
       this.imgList.splice(index, 1);
     } else {
       this.imgLists.imageUrl = "";
       this.imgLists.linkUrl = "";
       this.imgLists.applinkUrl= "";
       this.imgLists.siteType = 2;
     }
   }
 },
 //删除
 removeImg(item, index) {
   console.log(item);
   this.del(item.id, "1", index);
 },

提交：

//提交banner
add(type) {
  if (type == "1") {
    this.imgList.forEach((item, index) => {
      item.sort = index + 1;
    });
  } else {
    this.imgLists.sort = 1;
  }
  let params = {
    bannerToList: type == "1" ? this.imgList : [this.imgLists],
    // timeLine: this.timeLine ? parseFloat(this.timeLine) : 0,
    timeLine: type == "1" ? parseFloat(this.timeLine) : ""
  };
  post("/sys/banner/add", params).then(result => {
    if (result.code === 200) {
      this.$message.success("上传成功！");
      if (type == "1") {
        this.getImgList(1);
      } else {
        this.getImgList(2);
      }
    } else {
      try {
        this.$message.error(result.data);
      } catch {
        this.$message.error(result.msg);
      }
    }
  });
},
submit(type) {
  console.log(this.imgList);
  console.log(this.imgLists);
  this.add(type);
}

图片拖拽调换位置：
安装

npm install awe-dnd --save
yarn add awe-and

在main.js中写入：

import VueDND from 'awe-dnd'

Vue.use(VueDND)

使用：
v-dragging

  <div
    class="lfzImg"
    v-for="(item,index) in imgList"
    :key="index"
    v-dragging="{ item, list: imgList, group: 'color' }"
  >

mounted() {
  this.$dragging.$on("dragged", ({ value }) => {
    console.log(value);
    this.imgList = value.list;
  });
},

使用的插件，$on响应插件内暴露的方法，执行内置的方法，然后把list传进去，这样v-for遍历的数组渲染出的节点就可以拖拽了
这个地方的list的赋值，是将拖拽完成之后改变了元素位置的数组赋值给了原数组，个方法输出的list就是改变了元素位置的新数组，赋值给原数组，页面样式就改变了