iview Upload图片上传 (数量限定+类型限定+大小限定)

1.npm 下载

npm install view-design --save

2. main.js 全局引入

import iView from 'view-design'
import 'view-design/dist/styles/iview.css'
Vue.use(iView)

3.组件封装

<template>
  <div>
    <Row>
      <div class="imageTitle"><span class="required" v-if="required">* </span>{{ title }}</div>
      <div class="demo-upload-list" v-for="(item,index) in uploadList" :key="index">
        <template v-if="item.status === 'finished'">
          <img :src="baseURL + item.url">
          <div class="demo-upload-list-cover">
            <Icon type="ios-eye-outline" @click.native="showBigImage(baseURL+ item.url)" title="点击查看"></Icon>
            <Icon type="ios-trash-outline" @click.native="handleRemove(item,index)"></Icon>
          </div>
        </template>
        <template v-else>
          <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
        </template>
      </div>
      <Upload
        v-show="uploadList.length<5"
        ref="upload"
        :multiple="false"
        :show-upload-list="false"
        :max-size="maxSize"
        :on-exceeded-size="overSizeError"
        :on-success="handleFileSuccess"
        :on-error="handleFileError"
        :on-format-error="handleFormatError"
        :action="uploadImageUrl"
        :headers="uploadHeader"
        :default-file-list="defaultList"
        type="drag"
        style="display: inline-block;width:78px;">
        <div style="width: 78px;height:78px;line-height: 78px;">
          <Icon type="ios-add" size="40"></Icon>
        </div>
      </Upload>
    </Row>
  </div>
</template>

<script>
//import Cookies from 'js-cookie'
//import { TOKEN_KEY } from '@/libs/util'
import baseURL from '_conf/url'

export default {
  name: 'uploadImgList',
  props: {
    format:{
      type:Array,
      default: ()=>['jpeg','jpg', 'png']
    },
    value: {
      type: Array
    },
    title: {
      type: String
    },
    showViewList: {
      type: Boolean,
      default: true
    },
    fileType: {
      type: String
    },
    required: {
      type: Boolean,
      default: false
    },
    maxSize:{
      type:Number,
      default:()=>5120
    }
  },
  data () {
    return {
      defaultList: [],
      uploadList: [],
      fileUrlList: [],
      baseURL: baseURL
    }
  },
  computed: {
    //uploadHeader () {
    // return { token: Cookies.get(TOKEN_KEY) }
    //},
    uploadImageUrl () {
      return baseURL + '/d-admin/file/uploadFile'
    }
  },
  mounted () {

  },
  methods: {
    /**
     * 图片上传成功后
     */
    handleFileSuccess (res, file, fileList) {
      if (res.success) {
        file.url = res.result
      }
      this.uploadList.push(file)
      this.fileUrlList.push(file.url)
      this.$emit('getFileUrl',this.fileUrlList)
    },
    /**
     * 图片（文件）上传失败
     */
    handleFileError (res, file, fileList) {
      this.showFileUpErr('未知原因：' + res)
    },
    /**
     * 显示文件上传失败的错误信息
     * @param msg
     */
    showFileUpErr (msg) {
      this.$Notice.error({
        title: '文件上传失败',
        desc: msg
      })
    },
    /**
     * 图片大小超过限制
     */
    overSizeError(file, fileList){
      this.showFileUpErr('图片大小不能超过'+this.maxSize+'kb')
    },
    /**
     * 上传文件之前
     */
    // handleBeforeUpload(){
    //   console.log(this.uploadList.length)
    //   const check = this.uploadList.length < 5;
    //   if (!check) {
    //     this.$Notice.warning({
    //       title: '最多上传4张图片'
    //     });
    //   }
    //   return check;
    // },
    /**
     * 查看文件
     */
    showBigImage (url) {
      window.open(url)
    },
    /**
     * 删除文件
     */
    handleRemove (file,index) {
      // console.log(file,this.$refs.upload.fileList)
      // const fileList = this.$refs.upload.fileList
      // let index = fileList.indexOf(file)
      // console.log(index,'index')
      // this.$refs.upload.fileList.splice(index, 1)
      this.uploadList.splice(index, 1)
      this.fileUrlList.splice(index, 1)
      this.$emit('getFileUrl',this.fileUrlList)
    },
    /**
     * 图片类型不通过
     */
    handleFormatError (file) {
      this.showFileUpErr(file.name + ' 上传失败，只能上传图片.')
    },
    /**
     * 重置表单
     */
    resetData () {
      this.defaultList = []
      this.uploadList = []
      this.fileUrlList = []
    }
  },
  watch: {
    value (data) {
      if (data) {
        this.uploadList = []
        this.fileUrlList = []
        data.forEach(item=>{
          console.log(item)
          this.fileUrlList.push(item)
          this.uploadList.push({name:item,url:item,status:'finished'})
        })
      }
    }
  }
}
</script>

<style scoped>
.demo-upload-list{
  display: inline-block;
  width: 80px;
  height: 80px;
  text-align: center;
  line-height: 80px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0,0,0,.2);
  margin-right: 4px;
}
.demo-upload-list img{
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover{
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.6);
}
.demo-upload-list:hover .demo-upload-list-cover{
  display: block;
}
.demo-upload-list-cover i{
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  margin: 0 2px;
}
.required{
  color: red;
  font-size: 13px;
  /*vertical-align: -3px;*/
  display: inline-block;
}
.imageTitle {
  line-height: 23px;
  margin: 5px;
}
</style>

　　

4.页面中使用

<template>
<div>
//maxSize 大小限定
//
 <upload-img-list  @getFileUrl="getFileUrl" :maxSize="500"  :uploadList="imgAddList" v-model="imgAddList" ref="uploadImg"></upload-img-list>
</div>
</template>
<script>
//引入
import uploadImgList from '_c/fileUpload/uploadImgList'
export default {
  components:{
    uploadImgList,
  },
  data() {
    return {
    imgAddList:[],//图片
}
},
methods:{
    //图片上传
    getFileUrl(val){
     //val  图片上传组件传过来的数据
    },
}
}
</script>