上传图片限制提示

admin-update/src/components/common/elx-upload.vue

@@ -1,106 +1,104 @@
 <template>
-    <div>
-        <el-upload
-                :action=action
-                list-type="picture-card"
-                :http-request="httpRequest"
-                :limit="limit"
-                :file-list="fileList"
-                :on-exceed="exceed"
-                :on-success="success"
-                :headers="{token: token}"
-                :multiple="multiple"
-                :on-preview="handlePictureCardPreview"
-                :on-remove="handleRemove">
-            <i class="el-icon-plus"></i>
-        </el-upload>
-        <el-dialog :visible.sync="dialogVisible">
-            <img width="100%" :src="dialogImageUrl" alt="">
-        </el-dialog>
-    </div>
+	<div>
+		<el-upload
+			:action="action"
+			list-type="picture-card"
+			:http-request="httpRequest"
+			:limit="limit"
+			:file-list="fileList"
+			:on-exceed="exceed"
+			:on-success="success"
+			:headers="{ token: token }"
+			:multiple="multiple"
+			:on-preview="handlePictureCardPreview"
+			:on-remove="handleRemove"
+		>
+			<i class="el-icon-plus"></i>
+		</el-upload>
+		<el-dialog :visible.sync="dialogVisible">
+			<img width="100%" :src="dialogImageUrl" alt="" />
+		</el-dialog>
+	</div>
 </template>
 
 <script>
-    import {mapGetters} from 'vuex';
+import { mapGetters } from 'vuex';
 
-    export default {
-        name: "elx-upload",
-        props: {
-            limit: null,
-            multiple: {
-                type: Boolean,
-                default: true
-            },
-            fileList: {
-                type: Array,
-                default: []
-            },
-            value: [Array, String]
-        },
+export default {
+	name: 'elx-upload',
+	props: {
+		limit: null,
+		multiple: {
+			type: Boolean,
+			default: true
+		},
+		fileList: {
+			type: Array,
+			default: []
+		},
+		value: [Array, String]
+	},
 
-        data() {
-            const upload = this.$service.common.upload();
+	data() {
+		const upload = this.$service.common.upload();
 
-            return {
-                action: upload.url,
-                list: [],
-                index: 0,
-                // 图片展示
-                dialogImageUrl: '',
-                dialogVisible: false,
-            };
-        },
-        computed: {
-            ...mapGetters(['token'])
-        },
-        mounted() {
-            this.init();
-        },
-        methods: {
-            init() {
-            },
-            httpRequest(params) {
-                const file = params.file
-                this.getBase64(file).then(res => {
-                    this.$service.common.uploadImg({content: res}).then(subRes => {
-                        params.onSuccess(subRes)
-                    });
-                });
-            },
-            handleRemove(file, fileList) {
-                this.$emit('handleRemove', {file, fileList})
-            },
-            handlePictureCardPreview(file) {
-                this.dialogImageUrl =file.showBBGG|| file.url;
-                this.dialogVisible = true;
-            },
-            exceed() {
-                this.$message(`不能超过${this.limit}`)
-            },
-            success(response, file, fileList) {
-                this.$emit('update:fileList', fileList)
-                this.$emit('success', {response, file, fileList})
-            },
-            getBase64(file) {
-                return new Promise(function (resolve, reject) {
-                    let reader = new FileReader();
-                    let imgResult = '';
-                    reader.readAsDataURL(file);
-                    reader.onload = function () {
-                        imgResult = reader.result;
-                    };
-                    reader.onerror = function (error) {
-                        reject(error);
-                    };
-                    reader.onloadend = function () {
-                        resolve(imgResult);
-                    };
-                });
-            }
-        },
-    }
+		return {
+			action: upload.url,
+			list: [],
+			index: 0,
+			// 图片展示
+			dialogImageUrl: '',
+			dialogVisible: false
+		};
+	},
+	computed: {
+		...mapGetters(['token'])
+	},
+	mounted() {
+		this.init();
+	},
+	methods: {
+		init() {},
+		httpRequest(params) {
+			const file = params.file;
+			this.getBase64(file).then(res => {
+				this.$service.common.uploadImg({ content: res }).then(subRes => {
+					params.onSuccess(subRes);
+				});
+			});
+		},
+		handleRemove(file, fileList) {
+			this.$emit('handleRemove', { file, fileList });
+		},
+		handlePictureCardPreview(file) {
+			this.dialogImageUrl = file.showBBGG || file.url;
+			this.dialogVisible = true;
+		},
+		exceed() {
+			this.$message.warning(`最多只能上传${this.limit}张图片`);
+		},
+		success(response, file, fileList) {
+			this.$emit('update:fileList', fileList);
+			this.$emit('success', { response, file, fileList });
+		},
+		getBase64(file) {
+			return new Promise(function(resolve, reject) {
+				let reader = new FileReader();
+				let imgResult = '';
+				reader.readAsDataURL(file);
+				reader.onload = function() {
+					imgResult = reader.result;
+				};
+				reader.onerror = function(error) {
+					reject(error);
+				};
+				reader.onloadend = function() {
+					resolve(imgResult);
+				};
+			});
+		}
+	}
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

huadian/index.html

@@ -43,4 +43,4 @@
 			.once .sub-title {
 				color: #ababab;
 				font-size: 12px;
-			}</style><link href=/css/app.6c7c3c55.css rel=preload as=style><link href=/css/chunk-libs.6d5f97e5.css rel=preload as=style><link href=/js/app.4e555983.js rel=preload as=script><link href=/js/chunk-libs.fba3356a.js rel=preload as=script><link href=/css/chunk-libs.6d5f97e5.css rel=stylesheet><link href=/css/app.6c7c3c55.css rel=stylesheet></head><body><noscript></noscript><div id=app><div class=once><div class=container><div class=title>正在加载资源</div><div class=sub-title>初次加载资源可能需要较多时间 请耐心等待</div></div><div class=footer><a href=https://www.baidu.com/ target=_blank>花卉宝</a></div></div></div><script src=/cdn/vue/2.6.10/vue.min.js></script><script src=/cdn/vue-router/3.1.3/vue-router.min.js></script><script src=/cdn/vuex/3.1.1/vuex.min.js></script><script src=/cdn/clipboard.js/2.0.4/clipboard.min.js></script><script src=/cdn/axios/0.19.0-beta.1/axios.min.js></script><script src=/cdn/nprogress/0.2.0/nprogress.min.js></script><script src=/cdn/Mock.js/1.0.1-beta3/mock-min.js></script><script src=/cdn/quill/2.0.0-dev.3/quill.min.js></script><script src=/cdn/element-ui/2.13.0/index.js></script><script src=/cdn/viewerjs/1.3.7/viewer.min.js></script><script src=/cdn/echarts/4.4.0-rc.1/echarts.min.js></script><script src=/cdn/npm/vue-echarts@4.0.2.js></script><script src=/js/chunk-libs.fba3356a.js></script><script src=/js/app.4e555983.js></script></body></html>
+			}</style><link href=/css/app.6c7c3c55.css rel=preload as=style><link href=/css/chunk-libs.6d5f97e5.css rel=preload as=style><link href=/js/app.027b6d4b.js rel=preload as=script><link href=/js/chunk-libs.fba3356a.js rel=preload as=script><link href=/css/chunk-libs.6d5f97e5.css rel=stylesheet><link href=/css/app.6c7c3c55.css rel=stylesheet></head><body><noscript></noscript><div id=app><div class=once><div class=container><div class=title>正在加载资源</div><div class=sub-title>初次加载资源可能需要较多时间 请耐心等待</div></div><div class=footer><a href=https://www.baidu.com/ target=_blank>花卉宝</a></div></div></div><script src=/cdn/vue/2.6.10/vue.min.js></script><script src=/cdn/vue-router/3.1.3/vue-router.min.js></script><script src=/cdn/vuex/3.1.1/vuex.min.js></script><script src=/cdn/clipboard.js/2.0.4/clipboard.min.js></script><script src=/cdn/axios/0.19.0-beta.1/axios.min.js></script><script src=/cdn/nprogress/0.2.0/nprogress.min.js></script><script src=/cdn/Mock.js/1.0.1-beta3/mock-min.js></script><script src=/cdn/quill/2.0.0-dev.3/quill.min.js></script><script src=/cdn/element-ui/2.13.0/index.js></script><script src=/cdn/viewerjs/1.3.7/viewer.min.js></script><script src=/cdn/echarts/4.4.0-rc.1/echarts.min.js></script><script src=/cdn/npm/vue-echarts@4.0.2.js></script><script src=/js/chunk-libs.fba3356a.js></script><script src=/js/app.027b6d4b.js></script></body></html>

huadian/js/chunk-2d22e146.122478ba.js → huadian/js/chunk-2d22e146.576741d8.js

@@ -1 +1 @@
-(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d22e146"],{f9da:function(e,t,i){"use strict";i.r(t);var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",[i("el-upload",{attrs:{action:e.action,"list-type":"picture-card","http-request":e.httpRequest,limit:e.limit,"file-list":e.fileList,"on-exceed":e.exceed,"on-success":e.success,headers:{token:e.token},multiple:e.multiple,"on-preview":e.handlePictureCardPreview,"on-remove":e.handleRemove}},[i("i",{staticClass:"el-icon-plus"})]),i("el-dialog",{attrs:{visible:e.dialogVisible},on:{"update:visible":function(t){e.dialogVisible=t}}},[i("img",{attrs:{width:"100%",src:e.dialogImageUrl,alt:""}})])],1)},l=[],s=(i("d3b7"),i("5530")),o=i("5880"),a={name:"elx-upload",props:{limit:null,multiple:{type:Boolean,default:!0},fileList:{type:Array,default:[]},value:[Array,String]},data:function(){var e=this.$service.common.upload();return{action:e.url,list:[],index:0,dialogImageUrl:"",dialogVisible:!1}},computed:Object(s["a"])({},Object(o["mapGetters"])(["token"])),mounted:function(){this.init()},methods:{init:function(){},httpRequest:function(e){var t=this,i=e.file;this.getBase64(i).then((function(i){t.$service.common.uploadImg({content:i}).then((function(t){e.onSuccess(t)}))}))},handleRemove:function(e,t){this.$emit("handleRemove",{file:e,fileList:t})},handlePictureCardPreview:function(e){this.dialogImageUrl=e.showBBGG||e.url,this.dialogVisible=!0},exceed:function(){this.$message("不能超过".concat(this.limit))},success:function(e,t,i){this.$emit("update:fileList",i),this.$emit("success",{response:e,file:t,fileList:i})},getBase64:function(e){return new Promise((function(t,i){var n=new FileReader,l="";n.readAsDataURL(e),n.onload=function(){l=n.result},n.onerror=function(e){i(e)},n.onloadend=function(){t(l)}}))}}},c=a,u=i("2877"),r=Object(u["a"])(c,n,l,!1,null,"4c462b97",null);t["default"]=r.exports}}]);
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d22e146"],{f9da:function(e,t,i){"use strict";i.r(t);var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",[i("el-upload",{attrs:{action:e.action,"list-type":"picture-card","http-request":e.httpRequest,limit:e.limit,"file-list":e.fileList,"on-exceed":e.exceed,"on-success":e.success,headers:{token:e.token},multiple:e.multiple,"on-preview":e.handlePictureCardPreview,"on-remove":e.handleRemove}},[i("i",{staticClass:"el-icon-plus"})]),i("el-dialog",{attrs:{visible:e.dialogVisible},on:{"update:visible":function(t){e.dialogVisible=t}}},[i("img",{attrs:{width:"100%",src:e.dialogImageUrl,alt:""}})])],1)},l=[],s=(i("d3b7"),i("5530")),o=i("5880"),a={name:"elx-upload",props:{limit:null,multiple:{type:Boolean,default:!0},fileList:{type:Array,default:[]},value:[Array,String]},data:function(){var e=this.$service.common.upload();return{action:e.url,list:[],index:0,dialogImageUrl:"",dialogVisible:!1}},computed:Object(s["a"])({},Object(o["mapGetters"])(["token"])),mounted:function(){this.init()},methods:{init:function(){},httpRequest:function(e){var t=this,i=e.file;this.getBase64(i).then((function(i){t.$service.common.uploadImg({content:i}).then((function(t){e.onSuccess(t)}))}))},handleRemove:function(e,t){this.$emit("handleRemove",{file:e,fileList:t})},handlePictureCardPreview:function(e){this.dialogImageUrl=e.showBBGG||e.url,this.dialogVisible=!0},exceed:function(){this.$message.warning("最多只能上传".concat(this.limit,"张图片"))},success:function(e,t,i){this.$emit("update:fileList",i),this.$emit("success",{response:e,file:t,fileList:i})},getBase64:function(e){return new Promise((function(t,i){var n=new FileReader,l="";n.readAsDataURL(e),n.onload=function(){l=n.result},n.onerror=function(e){i(e)},n.onloadend=function(){t(l)}}))}}},c=a,u=i("2877"),r=Object(u["a"])(c,n,l,!1,null,"7d15a385",null);t["default"]=r.exports}}]);