From 4f953ffc89fc95f83b152e914c5e65938b440f17 Mon Sep 17 00:00:00 2001
From: Xxxu <794772283@qq.com>
Date: 星期二, 07 七月 2020 10:03:02 +0800
Subject: [PATCH] 上传项目
---
src/views/modules/led/led-controller/image-upload.vue | 114 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 114 insertions(+), 0 deletions(-)
diff --git a/src/views/modules/led/led-controller/image-upload.vue b/src/views/modules/led/led-controller/image-upload.vue
new file mode 100644
index 0000000..a329848
--- /dev/null
+++ b/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() // 鐢‵ormData瀛樻斁涓婁紶鏂囦欢
+ 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>
\ No newline at end of file
--
Gitblit v1.9.3