上传项目

Xxxu

2020-07-07 4f953ffc89fc95f83b152e914c5e65938b440f17

 src/views/modules/led/led-controller/image-upload.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,114 @@
<template>
  <div style="padding: 20px">
    <el-row>
      <el-col :span="18">
        <div>
          <el-upload
            class="upload-demo"
            drag
            :action="photoUrl"
            ref="photoUpload"
            accept=".jpg,.png"
            :auto-upload="false"
            :file-list="photoFileList"
            :on-change="onChangePhoto"
            list-type="picture"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <button class="btn" @click="photoSubmitUpload"></button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
import Vue from 'vue'
export default {
  data () {
    return {
      photoUrl: '',
      photoFileList: [],
      submitData: {
        lightemitId: ''
      }
    }
  },
  methods: {
    init () {
      this.photoFileList = []
      this.photoUrl = this.$http.adornUrl(`/pole/polelightemit/photoUpload?token=${this.$cookie.get('token')}`)
    },
    onChangePhoto (file, fileList) {
      this.photoFileList = fileList
    },
    photoSubmitUpload () {
      let formData = new FormData()  //  ç”¨FormData存放上传文件
      this.photoFileList.forEach(file => {
        formData.append('file', file.raw)
      })
      formData.append('file', this.photoFileList)
      formData.append('lightemitId', this.$store.state.led.lightemitId)
      let ax = axios.create()
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          'xiaoxuetongxue-sessionId': Vue.cookie.get('token')
        }
      }
      ax.post(this.$http.adornUrl(`/pole/polelightemit/photoUpload?token=${this.$cookie.get('token')}`), formData, config).then(result => {
        this.$message({
          message: '操作成功',
          type: 'success',
          duration: 1500,
          onClose: () => {
            this.photoFileList = []
            // this.visible = false
            // this.$emit('refreshDataList')
          }
        })
      }).catch(err => {
        this.$message.error(err)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.btn {
  border-style: none;
  width: 100px;
  height: 35px;
  background: url(~@/assets/img/btn-config.png);
  background-repeat:no-repeat;
  border-style: none;
  background-size: 100%;
  color: #fff;
  font-size: 1.4em;
  font-weight: 550;
};
div{
  /deep/ .el-upload-list {
    white-space:nowrap;
    width:360px;
    overflow-x:scroll;
  }
  /deep/ .el-upload-list__item {
    display: inline-block;
    width: 79px !important;
    background-color: #123461;
    /deep/ .el-icon-document {
      color: transparent;
    }
  }
}
</style>