vue脚手架-上传图片 根据下拉框选择到的不同，显示不一样的图片内容（一）

根据下拉框选择的选项不同，展示出不一样的图片内容

此篇文章主要实现下拉款选择和图片连接起来以及添加和删除，下篇则是实现图片拖拽(draggable)和更新
效果：

·------------------------------------------------------------------------------------------------------------------------

此文章分为两部分来梳理（内含两者之间如何联系起来）：
1、下拉框
2、上传图片

该功能使用了element-ui插件来实现，看文章前推荐先去看看官网 ==》 下拉框 、上传图片

go~

前言：后端传了1-6的数字用来表示不同的数据类型，然后每个类型都有个接口。我的下拉框需要显示这六个图片类型供选择。然后根据下拉框选择的不同来展示对应的图片类型。

思路：下拉框：根据图片类型，把六个类型都显示出来

1、下拉框
注意：v-model的值为当前被选中的el-option的 value 属性值，所以两个的命名得一样
提示：下拉框和图片的桥梁主要式依靠 el-select 的 v-model和change

<template>
  <el-form>
      <el-form-item label="图片类型：">
        <el-select
          v-model="select.value"  //v-model的值为当前被选中的el-option的 value 属性值。
          placeholder="请选择"
          clearable  //是否可以清空选项
          @change="handleChange"  // 选中值发生变化时触发，回调参数：目前的选中值。这个我用来处理图片显示的问题
        >
          <el-option
            v-for="item in select.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </template>
  <script>
     export default {
      data(){
      	select: {
        	// 当前选择器值
        	value: '',
       	 	options: [{
          	value: 1,
          	label: 'ai',
          	url: 'a/i' //这是获取图片的后置api接口
        	}, {
          	value: 2,
          	label: 'app banners',
          	url: 'a/b'
        	}, {
         	 value: 3,
          	label: 'wi',
          	url: 'w/i'
        	}, {
          	value: 4,
          	label: 'wb',
          	url: 'w/bs'
        	}, {
          	value: 5,
          	label: 'di',
          	url: 'd/i'
        	}, {
          	value: 6,
          	label: 'db',
          	url: 'd/b'
        	}]
      	},
     	}
     }
  </script>

2、上传图片(照片墙)

2.1 template 部分

<el-upload
      list-type="picture-card"  // 定义照片显示的模式，此用的是 照片墙
      :action="#"  // 图片上传的地址，其实这个真正实操的时候，没啥用。会给我们我们后面设定的地址覆盖掉，但是又不能不写，所以可以用 # 或者 '' 代替
      :name="upload.fileParamsName" //上传的文件字段名
      :multiple='false' // 是否支持多选文件
      :file-list="upload.fileList" // 这个是存放要‘显示图片’的数组
      :data="uploadParams" //上传时附带的额外参数（我们请求接口的时候，很大几率会给要求携带参数来请求）
      :on-preview="handlePictureCardPreview" //点击文件列表中已上传的文件时的钩子
      :on-remove="handleRemove" // 文件列表移除文件时的钩子
      :before-upload="beforeAvatarUpload" // 上传文件之前的钩子，参数为上传的文件
      :http-request="handleUpload"  // 覆盖默认的上传行为，可以自定义上传的实现
    >
      <i class="el-icon-plus"></i>
    </el-upload>
	//放大图片-弹出框
    <el-dialog :visible.sync="dialogVisible">
      <img
        width="100%"
        :src="dialogImageUrl"
        alt=""
      >
   </el-dialog>

2.2 script 部分

2.2.1 点击下拉框，显示对应不对的图片（我的这边有六个图片类型，两种数据格式 对象和数组）
步骤：
1、在方法钟传入当前选中的value
2、判断：没有value的话，不管。有的话，则进行下一步
3、拿到获取数据的端口，然后就可以进去搬东西啦
4、物品分为两类，一类是数组，一类是对象，因此搬运的方式不同。所以需要进行判断：获取到的数据是否为数组，是的话就按照数组来获取，不是的话，就按照对象来获取，之前的博客有详细说明获取数据格式的方式。
5、把获取到的数据存放到 fileList 里面，就是上面的 :file-list=“upload.fileList”

 // 显示对应不同类型的图片
    async handleChange (value) {
      if (value) {
        let _this = this
        let data = []
        let url = this.select.options[value - 1].url
        let { data: res } = await this.$http.get(`/banner/${url}`)
        console.log(res.data)
        if (res.code !== 20000) {
          _this.upload.fileList = data
        } else {
          // 判断是否为数组
          if (Array.isArray(res.data)) {
            res.data.forEach(function (elem, index) {
              let fomatData = {
                url: `图片前置地址/${elem.adImageName}`, //因为后端只传了后面那部分地址过来，因此需要我自己拼接
                name: elem.adName,
                link: elem.adLink,
                order: elem.adOrder,
                banner: elem.idBanner,
                type: elem.adType
              }
              data.push(fomatData)
            })
          } else {
            data.push({
              url: `图片前置地址/${res.data.adImageName}`,
              name: res.data.adName,
              link: res.data.adLink,
              order: res.data.adOrder,
              banner: res.data.idBanner,
              type: res.data.adType
            })
          }
          _this.upload.fileList = data //把获取到的数据存储在显示图片的数组里
        }
      }
    },

2.2.2 图片上传
需求：我们图片上传要求传的参数有name link type order 图片,一共五个。然后参数携带之前需要FormData一下。

冲~

1、template 部分代码中，:data 中是上传时携带的额外参数
2、在computed里面：

  // 上传时附带的额外参数
    uploadParams () {
      return {
        name: '',
        link: 'www.jh2dsp.com',
        type: this.select.value,
        order: Math.ceil(Math.random() * 10) + 1,
        imageFile: ''
      }
    }

3、上传之前需要填充好name的数值

 // 上传文件之前的钩子
    beforeAvatarUpload (file) {
      this.uploadParams.name = file.name
      this.uploadParams.imageFile = file
    }

4、添加图片
你们不用formData的话就直接写到请求地址后面啦~

// 添加图片
    async handleUpload (file) {
      const { name, link, type, order,imageFile } = this.uploadParams
      const fd = new FormData()
      fd.append('name', name)
      fd.append('link', link)
      fd.append('type', type)
      fd.append('order', order)
      fd.append('imageFile', imageFile)
      const addPic = await this.$http.post('/banner/add', fd)
    }

删除图片和点击图片放大，这两个就不说啦 都是雷同的，比较简单。