Commit c776144f1ea7d7b2da0ab908db8407beb5b4b633
1 parent
69aeb7b4
图片组件上传功能优化
Showing
2 changed files
with
60 additions
and
80 deletions
src/api/file.js
| @@ -55,4 +55,12 @@ export function fileDetail(data) { | @@ -55,4 +55,12 @@ export function fileDetail(data) { | ||
| 55 | }) | 55 | }) |
| 56 | } | 56 | } |
| 57 | 57 | ||
| 58 | -export default { fileList, fileAdd, fileDel, fileUpdate, fileDetail } | 58 | +export function getFielList() { |
| 59 | + return request({ | ||
| 60 | + url: '/file/getFielList', | ||
| 61 | + method: 'get' | ||
| 62 | + }) | ||
| 63 | +} | ||
| 64 | + | ||
| 65 | + | ||
| 66 | +export default { fileList, fileAdd, fileDel, fileUpdate, fileDetail, getFielList } |
src/views/bigscreenDesigner/designer/components/customUploadNew.vue
| @@ -3,18 +3,16 @@ | @@ -3,18 +3,16 @@ | ||
| 3 | <el-input clearable v-model.trim="uploadImgUrl" size="mini" @change="changeInput"> | 3 | <el-input clearable v-model.trim="uploadImgUrl" size="mini" @change="changeInput"> |
| 4 | <template slot="append"> | 4 | <template slot="append"> |
| 5 | <i class="iconfont iconfolder-o" @click="dialogVisible = true"></i> | 5 | <i class="iconfont iconfolder-o" @click="dialogVisible = true"></i> |
| 6 | - <!-- <input type="file" class="file" ref="files" @change="getImages" /> --> | ||
| 7 | </template> | 6 | </template> |
| 8 | </el-input> | 7 | </el-input> |
| 9 | 8 | ||
| 10 | 9 | ||
| 11 | <!-- 弹窗 --> | 10 | <!-- 弹窗 --> |
| 12 | <el-dialog title="图库" :visible.sync="dialogVisible"> | 11 | <el-dialog title="图库" :visible.sync="dialogVisible"> |
| 13 | - <el-upload class="upload-demo" :on-change="changeInput"> | ||
| 14 | - <el-button size="medium" type="info" icon="el-icon-upload2">点击上传</el-button> | ||
| 15 | - </el-upload> | 12 | + <el-button size="medium" type="info" icon="el-icon-upload2" @click="uploadHandler">点击上传</el-button> |
| 13 | + <input type="file" class="file" ref="files" @change="getImages" /> | ||
| 16 | <div class="image-list"> | 14 | <div class="image-list"> |
| 17 | - <el-image class="image" v-for="url in urls" :key="url" :src="url" lazy></el-image> | 15 | + <el-image class="image" v-for="item in fileList" :key="item.fileId" :src="item.urlPath" lazy></el-image> |
| 18 | </div> | 16 | </div> |
| 19 | </el-dialog> | 17 | </el-dialog> |
| 20 | 18 | ||
| @@ -26,6 +24,7 @@ | @@ -26,6 +24,7 @@ | ||
| 26 | <script> | 24 | <script> |
| 27 | import axios from "axios"; | 25 | import axios from "axios"; |
| 28 | import { getToken } from "@/utils/auth"; | 26 | import { getToken } from "@/utils/auth"; |
| 27 | +import { getFielList } from "@/api/file" | ||
| 29 | export default { | 28 | export default { |
| 30 | name: 'custom-upload-new', | 29 | name: 'custom-upload-new', |
| 31 | model: { | 30 | model: { |
| @@ -41,42 +40,6 @@ export default { | @@ -41,42 +40,6 @@ export default { | ||
| 41 | data() { | 40 | data() { |
| 42 | return { | 41 | return { |
| 43 | dialogVisible: false, // 弹窗状态 | 42 | dialogVisible: false, // 弹窗状态 |
| 44 | - urls: [ | ||
| 45 | - 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg', | ||
| 46 | - 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg', | ||
| 47 | - 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg', | ||
| 48 | - 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg', | ||
| 49 | - 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg', | ||
| 50 | - 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg', | ||
| 51 | - 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg', | ||
| 52 | - 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg', | ||
| 53 | - 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg', | ||
| 54 | - 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg', | ||
| 55 | - 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg', | ||
| 56 | - 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg', | ||
| 57 | - 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg', | ||
| 58 | - 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg', | ||
| 59 | - 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg', | ||
| 60 | - 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg', | ||
| 61 | - 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg', | ||
| 62 | - 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg', | ||
| 63 | - 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg', | ||
| 64 | - 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg', | ||
| 65 | - 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg', | ||
| 66 | - 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg', | ||
| 67 | - 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg', | ||
| 68 | - 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg', | ||
| 69 | - 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg', | ||
| 70 | - 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg', | ||
| 71 | - 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg', | ||
| 72 | - 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg', | ||
| 73 | - 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg', | ||
| 74 | - 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg', | ||
| 75 | - 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg', | ||
| 76 | - 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg', | ||
| 77 | - 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg' | ||
| 78 | - ], | ||
| 79 | - | ||
| 80 | requestUrl: process.env.BASE_API + "/file/upload", | 43 | requestUrl: process.env.BASE_API + "/file/upload", |
| 81 | headers: { | 44 | headers: { |
| 82 | Authorization: getToken() | 45 | Authorization: getToken() |
| @@ -85,64 +48,65 @@ export default { | @@ -85,64 +48,65 @@ export default { | ||
| 85 | uploadImgUrl: "" | 48 | uploadImgUrl: "" |
| 86 | }; | 49 | }; |
| 87 | }, | 50 | }, |
| 88 | - created() { | 51 | + async created() { |
| 89 | this.uploadImgUrl = this.value; | 52 | this.uploadImgUrl = this.value; |
| 53 | + const rs = await getFielList(); | ||
| 54 | + if (rs.code === 200 || rs.code === "200") { | ||
| 55 | + this.fileList = rs.data; | ||
| 56 | + } | ||
| 90 | }, | 57 | }, |
| 91 | methods: { | 58 | methods: { |
| 92 | - openDialog() { | ||
| 93 | - console.log(12313123213) | 59 | + uploadHandler() { |
| 60 | + this.$refs.files.click(); | ||
| 94 | }, | 61 | }, |
| 95 | - | ||
| 96 | - | ||
| 97 | - | ||
| 98 | getImages(el) { | 62 | getImages(el) { |
| 99 | - let file = el.target.files[0]; | ||
| 100 | - let type = file.type.split("/")[0]; | 63 | + const file = el.target.files[0]; |
| 64 | + const type = file.type.split("/")[0]; | ||
| 101 | if (type === "image") { | 65 | if (type === "image") { |
| 102 | this.upload(file); | 66 | this.upload(file); |
| 103 | } else { | 67 | } else { |
| 104 | - this.$message.warn("只能上传图片格式"); | 68 | + this.$message.warning("只能上传图片格式") |
| 105 | } | 69 | } |
| 106 | }, | 70 | }, |
| 107 | - upload(imgUrl) { | 71 | + upload(file) { |
| 108 | let that = this; | 72 | let that = this; |
| 109 | - console.log(that.headers); | ||
| 110 | let formdata = new FormData(); | 73 | let formdata = new FormData(); |
| 111 | - formdata.append("file", imgUrl); | ||
| 112 | - axios | ||
| 113 | - .post(this.requestUrl, formdata, { | ||
| 114 | - headers: that.headers | ||
| 115 | - }) | ||
| 116 | - .then(response => { | ||
| 117 | - let res = response.data; | ||
| 118 | - if (res.code == "200") { | ||
| 119 | - that.uploadImgUrl = res.data.urlPath; | ||
| 120 | - that.$emit("input", that.uploadImgUrl); | ||
| 121 | - that.$emit("change", that.uploadImgUrl); | ||
| 122 | - } | ||
| 123 | - }); | 74 | + formdata.append("file", file); |
| 75 | + // axios | ||
| 76 | + // .post(this.requestUrl, formdata, { | ||
| 77 | + // headers: that.headers | ||
| 78 | + // }) | ||
| 79 | + // .then(response => { | ||
| 80 | + // let res = response.data; | ||
| 81 | + // if (res.code === "200") { | ||
| 82 | + // that.uploadImgUrl = res.data.urlPath; | ||
| 83 | + // that.$emit("input", that.uploadImgUrl); | ||
| 84 | + // that.$emit("change", that.uploadImgUrl); | ||
| 85 | + // } | ||
| 86 | + // }); | ||
| 124 | }, | 87 | }, |
| 125 | changeInput(e) { | 88 | changeInput(e) { |
| 126 | - if (e) { | ||
| 127 | - this.uploadImgUrl = e; | ||
| 128 | - } else { | ||
| 129 | - this.$refs.files.value = ""; | ||
| 130 | - this.uploadImgUrl = ""; | ||
| 131 | - } | ||
| 132 | - this.$emit("input", this.uploadImgUrl); | ||
| 133 | - this.$emit("change", this.uploadImgUrl); | 89 | + // if (e) { |
| 90 | + // this.uploadImgUrl = e; | ||
| 91 | + // } else { | ||
| 92 | + // this.$refs.files.value = ""; | ||
| 93 | + // this.uploadImgUrl = ""; | ||
| 94 | + // } | ||
| 95 | + // this.$emit("input", this.uploadImgUrl); | ||
| 96 | + // this.$emit("change", this.uploadImgUrl); | ||
| 134 | } | 97 | } |
| 135 | } | 98 | } |
| 136 | }; | 99 | }; |
| 137 | </script> | 100 | </script> |
| 138 | <style lang="scss" scoped> | 101 | <style lang="scss" scoped> |
| 139 | .file { | 102 | .file { |
| 140 | - position: absolute; | ||
| 141 | - width: 100%; | ||
| 142 | - padding: 100%; | ||
| 143 | - right: 0; | ||
| 144 | - top: 0; | ||
| 145 | - opacity: 0; | 103 | + // position: absolute; |
| 104 | + // width: 100%; | ||
| 105 | + // padding: 100%; | ||
| 106 | + // right: 0; | ||
| 107 | + // top: 0; | ||
| 108 | + // opacity: 0; | ||
| 109 | + display: none; | ||
| 146 | } | 110 | } |
| 147 | 111 | ||
| 148 | /deep/.el-input-group__append, | 112 | /deep/.el-input-group__append, |
| @@ -188,6 +152,14 @@ export default { | @@ -188,6 +152,14 @@ export default { | ||
| 188 | 152 | ||
| 189 | .image { | 153 | .image { |
| 190 | width: 20%; | 154 | width: 20%; |
| 155 | + padding: 0 0.5px 0 0.5px; | ||
| 156 | + min-height: 90px; | ||
| 157 | + | ||
| 158 | + /deep/ .el-image__error { | ||
| 159 | + width: 100%; | ||
| 160 | + height: 100%; | ||
| 161 | + min-height: 90px; | ||
| 162 | + } | ||
| 191 | } | 163 | } |
| 192 | } | 164 | } |
| 193 | </style> | 165 | </style> |