From ccad616880f2f6e21adf18f6f4e28de9930ff05e Mon Sep 17 00:00:00 2001
From: children117cl <278950112@qq.com>
Date: 星期四, 27 五月 2021 12:34:42 +0800
Subject: [PATCH] 上传多图组件
---
src/components_simple/UploadMultipleImg.vue | 156 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 156 insertions(+), 0 deletions(-)
diff --git a/src/components_simple/UploadMultipleImg.vue b/src/components_simple/UploadMultipleImg.vue
new file mode 100644
index 0000000..e4b4af5
--- /dev/null
+++ b/src/components_simple/UploadMultipleImg.vue
@@ -0,0 +1,156 @@
+<template>
+ <div>
+ <!-- 涓婁紶鍥剧墖缁勪欢(澶氬浘) -->
+ <el-upload
+ ref="refUploadImg"
+ :accept="accept"
+ :auto-upload="false"
+ list-type="picture-card"
+ :class="{disabled:uploadDisabled}"
+ action="#"
+ :limit="limit"
+ :file-list="uploadImgs"
+ :on-change="addUploadImg"
+ :on-remove="delUploadImg"
+ :http-request="uploadImg"
+ :on-preview="uploadPreview"
+ :before-upload="beforeUploadImg"
+ size="mini"
+ >
+ <i class="el-icon-plus" />
+ </el-upload>
+ <!-- upload鏀惧ぇ鍥剧墖 -->
+ <el-dialog :visible.sync="uploadPreviewVisible" append-to-body style="text-align:center">
+ <img style="max-width:100%" :src="uploadPreviewUrl" alt="">
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+import mixin_upload from '@/mixins/upload.js' // 閫氱敤涓婁紶鍥剧墖棰勮
+export default {
+ mixins: [mixin_upload],
+ model: {
+ prop: 'uploadImgs',
+ event: 'change'
+ },
+ props: {
+ uploadImgs: {
+ type: Array,
+ default: () => {
+ return []
+ }
+ },
+ accept: {
+ type: String,
+ default: () => {
+ return 'image/jpeg,image/jpg,image/gif,image/png'
+ }
+ },
+ limit: {
+ type: Number,
+ default: 9
+ }
+ },
+
+ data() {
+ return {
+ callback: null
+ }
+ },
+ computed: {
+ uploadDisabled() {
+ return this.uploadImgs.length >= this.limit
+ }
+ },
+
+ methods: {
+ // 涓婁紶鍥剧墖 鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌
+ // 涓婁紶鍓嶇‘璁ゆ牸寮�
+ beforeUploadImg(file) {
+ const isImg = file.type.indexOf('image/') > -1
+ const isTooLarge = file.size / 1024 / 1024 > 4
+ let flag = true
+ if (!isImg) {
+ this.$message.error('蹇呴』鏄�夋嫨鍥剧墖鏂囦欢')
+ flag = false
+ } else if (isTooLarge) {
+ this.$message.error('璇峰嬁涓婁紶澶т簬4MB鐨勫浘鐗�')
+ flag = false
+ }
+ return flag
+ },
+ // 澧炲姞鍥剧墖
+ addUploadImg(file, fileList) {
+ this.$emit('change', fileList)
+ },
+ // 鍒犻櫎鍥剧墖
+ delUploadImg(file, fileList) {
+ this.$emit('change', fileList)
+ },
+ // 鎵ц涓婁紶鍟嗗搧鍥�
+ runUploadImg(suc_cb) {
+ console.log('runUploadImg!!!!!')
+ if (this.checkNeedUpload(this.uploadImgs)) {
+ this.callback = suc_cb
+ this.$refs.refUploadImg.submit()
+ } else {
+ suc_cb && suc_cb()
+ }
+ },
+ // 涓婁紶鍟嗗搧鍥�
+ uploadImg(res) {
+ console.log(res)
+ const file = res.file
+ const formData = new FormData()
+ formData.append('file', file)
+ console.log(formData)
+ this.postFN({
+ url: 'admin/image/upload?folderCode=IMG',
+ header: { 'Content-Type': 'multipart/form-data' },
+ params: formData,
+ mockData: {
+ code: 100,
+ msg: '',
+ data: {
+ imgUrl: 'xxxx'
+ }
+ }
+ }, (inf) => {
+ console.log('涓婁紶鍥剧墖鎴愬姛')
+
+ // 鏍规嵁uid 鏇挎崲鎺夋湭涓婁紶鐨勫浘鐗�
+ var uploadImgs = this.uploadImgs
+ uploadImgs.forEach((o, i) => {
+ if (o.uid === res.file.uid) uploadImgs[i] = { url: inf.imgUrl, status: 'success' }
+ })
+ this.uploadImgs = JSON.parse(JSON.stringify(uploadImgs))
+
+ // 瑙﹀彂change鏃堕棿婵�娲籿-model
+ this.$emit('change', uploadImgs)
+
+ console.log('涓婁紶鍥剧墖缁撴潫')
+
+ // 涓婁紶缁撴潫
+ if (!this.checkNeedUpload(this.uploadImgs)) {
+ console.log('涓婁紶杞挱鍥剧粨鏉�')
+ this.callback && this.callback(this.uploadImgs)
+ }
+ })
+ }
+ // 涓婁紶鍥剧墖 鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈
+ }
+}
+</script>
+
+<style>
+.disabled .el-upload--picture-card {
+ display: none;
+}
+.el-upload-list--picture-card{
+ line-height: 1;
+}
+.el-upload-list--picture-card .el-upload-list__item{
+ margin-bottom: 0
+}
+</style>
--
Gitblit v1.8.0