vue的爬坑之路（七）之----图片上传插件基于element-ui

安装element-ui

在命令行工具当中输入cnpm i element-ui -S, 等待安装

 在main.js中引入element相关的js

import { Upload } from 'element-ui'
Vue.use(Upload)

 

<template>
  <div class="leave_img">
    <ul class="clearfix">
      <li v-for='(ing,ind) in backgoods.pictures'>
        <img :src='ing.url' alt="">
        <span class="iconfont leave-close">&#xe664;</span>
      </li>
      <li  v-if='backgoods.pictures.length < 3'>
        <el-upload
           ref="upload"
           action="//upload.qiniu.com"
           accept="image/jpeg,image/gif,image/png,image/bmp"
           :on-change="handleChange"
           :before-upload="beforeUpload"
           :on-success="handleSuccess"
           :auto-upload="false"
           :show-file-list="false"
           :class="['img_expla']"
           :data="uploadparams"
           :limit="3">
          <div slot="trigger" size="small" type="primary" >
              <i class="iconfont">&#xe61b;</i>
              <p>( <span>限3张图</span> )</p >
          </div>
        </el-upload>
      </li>
      <!--
           :on-remove="handleRemove"
           :file-list="file_url"
           list-type="picture"
      -->
    </ul>
    <a class='leave_submit' @click='leaveSubmit'>提交申请</a>
  </div>
</template>
<script>
import InfiniteLoading from 'vue-infinite-loading';
export default {
  data() {
    return {
      uploadparams: {
        token: ''
      },
      pic: [],
      backgoods:{
        order_number:this.$route.params.ordernumber,
        skus:[],//sku_id
        accept:'yes',//协议确认的勾选传 yes或者no
        comment:'',//评论
        back_type:2,//售后类型
        reason_type:3,//退货原因类型
        pictures:[],//图片
        key:[]
      }
    };
  },
  methods: {
    handleChange (file,fileList) {
      console.log(file)
      console.log('------a------')
      console.log(fileList)
      this.backgoods.pictures = fileList
    },
    handleSuccess (response, file, fileList) {
      console.log('上传回调成功>>>' + JSON.stringify(response))
      this.backgoods.key.push(response.key)
      this.upload()
      // this.file_url = fileList
      // this.filecount++
      // if (this.preview.length === this.filecount) {
        // this.upload()
      //   this.filecount = 0
      // }
    },
    beforeUpload () {
      return this.$http.get('获取后台token接口').then(response => {
        this.uploadparams.token = response.data.data.uptoken
      })
    },
    // openfile(){
    //   this.$refs.file.click()
    // },
    // leaveClose(){
    //   this.backgoods.pictures=[]
    // },
    leaveSubmit(){
      if(this.backgoods.pictures.length == 0){
        this.upload()
      }else{
        this.$refs.upload.submit()
      }
    },
    upload () {
      this.$http.post('向后台提交接口',this.backgoods).then(res => {
        console.log(res)
      })
    }
  }
}
</script>
<style>
 input[type="file"]{
    display: none;
 }
 .leave_img ul li{
  float: left;
  background-color: #f0f0f0;
  width: 152px;
  height: 152px;
  border-radius: 10px;
  margin-right: 16px;
  position: relative;
  text-align: center;
  margin: 50px;
}
.leave_img ul li img{
  width: 152px; 
  height: 152px;  
}

.leave_img li i{
  color: #c2c2c2;
  width: 55px;
  height: 46px;
  font-size: 46px;
  display: block;
  margin:40px auto 0;
  box-sizing: border-box;
}
.leave_img li span.leave-close{
  width: 30px;
  height: 30px;
  font-size: 30px;
  color: #000;
  position: absolute;
  right: -8px;
  top: -8px;
  background-color: #fff;
  border-radius: 50%;
}
.leave_img li span{
  font-size: 22px;
  color: #8c8c8c;
}
.leave_submit{
  display: block;
  margin:90px auto;
  width: 702px;
  height: 88px;
  line-height: 88px;
  background-color: #c30d23;
  text-align: center;
  color: #fff;
  border-radius: 10px;
  font-size: 30px;
}
</style>