iview+vue前端上传图片到OSS(使用plupload)

闲下来记录下iview+vue+plupload前端上传图片的实例(话不多说直接看代码)

这是一个子组件部分

<template>
  <div class="uploader">
    <div class="demo-upload-list" v-for="(item,index) in pic_list" :key="index">
      <template>
        <img :src="item">
        <div class="demo-upload-list-cover">
          <Icon type="ios-arrow-back" @click.native="handlemove(index)" v-if="move"></Icon>
          <Icon type="ios-eye-outline" @click.native="handleView(index)"></Icon>
          <Icon type="ios-trash-outline" @click.native="handleRemove(index)" v-if="show"></Icon>
        </div>
      </template>
    </div>
    <div class="ivu-upload ivu-upload-drag" v-if="show">
      <div style="width: 104px; height: 104px; line-height: 104px;" :id="selectfiles">
        <i class="ivu-icon ivu-icon-camera" style="font-size: 30px;"></i>
      </div>
    </div>
    <Modal title="查看图片" v-model="visible" class-name="center-modal">
      <img :src="imgName" v-if="visible" style="width: 100%">
    </Modal>
  </div>
</template>
<script>
let files = []
// import md5 from 'js-md5'
export default {
  name: 'uploader',
  data: function () {
    return {
      pic_list: [],
      visible: false,
      imgName: ''
    }
  },
  props: {
    move:{
      type: Boolean,
      default: false
    },
    picture:{
      type:Array
    },
    amount: {
      type: Number,
      default: 1
    },
    imgs: {},
    selectfiles: {
      type: String,
      default: 'selectfiles'
    },
    banner: {},
    show: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    sendTOAliYunOss () {
      // 更改图片的元件
      var accessid = ''	//后台给的accessid											 
      var host = ''  //你的阿里云地址
      var policyBase64 = '' //后台给的policyBase64 
      var signature = '' 后台给的signature
      var key = 'coupon/' + (new Date() / 1000) + '${filename}'
      var filename = 'coupon/' + (new Date() / 1000)
      // filename = md5(filename)
      var uploader = new plupload.Uploader({
        url: host,
        browse_button: this.selectfiles,
        rename: true,
        unique_names: true,
        multipart_params: {
          Filename: `${filename}`,
          key: key,
          policy: policyBase64,
          OSSAccessKeyId: accessid,
          success_action_status: '200', // 让服务端返回200,不然，默认会返回204
          signature: signature
        },
        filters: {
          mime_types: [
            // 只允许上传图片
            {
              title: 'Image files',
              extensions: 'jpeg,jpg,gif,png'
            }
          ]
        }
      })
      uploader.init()
      uploader.bind('PostInit', function () {})
      uploader.bind('FileFiltered', function (up, file) {})
      var that = this
      uploader.bind('Error', function (up, err) {
        if (err.code === -600) {
          that.$Notice.warning({
            title: '温馨提示',
            desc: '您上传的图片尺寸过大,请重新选择上传'
          })
        }
      })
      // 绑定文件上传进度事件
      uploader.bind('UploadProgress', function (uploader, file) {
        that.uploadShow = true
        that.percent2 = file.percent
      })
      uploader.bind('FileUploaded', function (up, file, info) {
        if (info.status === 200) {
          setTimeout(function () {
            that.uploadShow = false
            that.percent2 = 0
            if (that.pic_list.length === 0) {
              files = []
            }
            if (that.amount === 1) {
              that.pic_list = []
            } else {
              files.push(host + file.name)
              if (that.pic_list.length >= that.amount) {
                that.$Notice.warning({
                  title: '温馨提示',
                  desc: '最多只能上传' + that.amount + '张图片'
                })
                return
              }
            }
            that.pic_list.push(host + filename + file.name)
            // console.log(that.pic_list)
            that.$emit('upload', that.pic_list, that.amount, that.selectfiles)
          }, 1)
        } else {
          that.$Message.error('上传失败')
        }
      })
      uploader.bind('BeforeUpload', (uploader, file) => {})
      uploader.bind('FilesAdded', function (up, files) {
        uploader.start()
      })
    },
    handleView (index) {
      this.visible = true
      this.imgName = this.pic_list[index]
    },
    handleRemove (index) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定删除',
        onOk: () => {
          this.pic_list.splice(index, 1)
          this.$emit('remove', this.pic_list, this.amount, this.selectfiles, index)
        },
        onCancel: () => {
          this.$Message.info('点击了取消')
        }
      })
    },
    handlemove(index){
      if(index!=0){
        this.pic_list[index]=this.pic_list.splice(index-1,1,this.pic_list[index])[0]
        this.$emit('move', this.pic_list, this.amount, this.selectfiles, index)
      }
    },
    empty () {
      this.pic_list = this.banner
      this.pic_list = []
    },
    getOncepic (pic) {
      this.pic_list = []
      this.pic_list.push(pic)
       if(pic=='0'){
        this.pic_list = []
      }
    },
    getManyPic (pic) {
      this.pic_list = pic
    }
  },
  created(){
    if(this.picture){
      if(this.picture.length > 0){
        this.pic_list = this.picture
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.sendTOAliYunOss()
    })
    
  }
}

</script>
<style lang="less">
.demo-upload-list {
  display: inline-block;
  width: 104px;
  height: 104px;
  text-align: center;
  line-height: 104px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 24px;
}

.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, 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;
}

.uploader {
  display: flex;
  .ivu-upload {
    input {
      display: block;
      opacity: 0;
      width: 58px;
      height: 58px;
      position: absolute;
      left: 0;
      cursor: pointer;
    }
  }
}

.center-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999 !important;
  .ivu-modal {
    top: 0;
    left: 0;
  }
}

</style>

这里是父组件

	//1.父组件引入
	import uploading from "@/components/uploading/uploading"
	//2.注册组件
	components:{  
	 	uploading
     },
     //使用组件
	<uploading @upload="logoUpload" :picture="pic_list" ref="pics" selectfiles="pics"></uploading>
	//上传成功回调函数得到图片链接
	uploadPopup(pic_list){
         console.log(pic_list[0])//上传所得图片
    },

有部分注释写的比较详细给新手参考，希望大家不要嫌啰嗦，欢迎大家留言交流