From 3af52f6a984c5fe6671640dbfb1c40540416ea7d Mon Sep 17 00:00:00 2001 From: yangfeng <wanwan926_4@163.com> Date: 星期三, 08 十一月 2023 16:40:51 +0800 Subject: [PATCH] 新建产品增加上传图片功能,增加vue-cropper插件 --- src/views/productManage/product/AddProductDialog.vue | 70 +++++++++++------------------------ 1 files changed, 22 insertions(+), 48 deletions(-) diff --git a/src/views/productManage/product/AddProductDialog.vue b/src/views/productManage/product/AddProductDialog.vue index 5c63af6..28db941 100644 --- a/src/views/productManage/product/AddProductDialog.vue +++ b/src/views/productManage/product/AddProductDialog.vue @@ -122,6 +122,14 @@ :disabled="!showFooter" ></el-input> </el-form-item> + <el-form-item label="鍥剧墖涓婁紶锛�" prop="imageUrl"> + <IconCropper + :isView="isView" + :image-url="editConfig.infomation.imageSrc" + @getImageData="getImageData" + style="width: 85%" + /> + </el-form-item> </div> <div class="right"> <el-form-item label="閿�鍞环鏍�" prop="salePrice"> @@ -462,11 +470,10 @@ </template> <script> -// import CommonFormTableView from "@/components/makepager/CommonFormTableView" +import IconCropper from "./IconCropper" import { getProductCategoryList } from "@/api/product/productCategory" import { getProductList, addProduct, updateProduct } from "@/api/product/product" -let inputElement = null export default { name: "AddProductDialog", props: { @@ -482,7 +489,7 @@ } } }, - components: {}, + components: { IconCropper }, computed: { modalTitle() { if (this.editConfig.title === "缂栬緫" && this.editConfig.autoEdit) { @@ -542,10 +549,19 @@ ], statisticsMap: { inLibrary: 0 // 鍦ㄥ簱 - } + }, + isView: false } }, created() { + if (this.editConfig.title === "缂栬緫" && !this.editConfig.autoEdit) { + this.isView = true + } + // if (this.editConfig.title === "鏂板缓") { + // this.editConfig.infomation.imageSrc = "" + // } else { + // this.editConfig.infomation.imageSrc = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" + // } this.getProductCategoryList() this.getProductList() this.setTableForm() @@ -712,50 +728,8 @@ this.tableData.splice(scope.$index, 1) }, // 涓婁紶鍥剧墖 - toGetImg() { - if (this.showFooter) { - if (inputElement === null) { - // 鐢熸垚鏂囦欢涓婁紶鐨勬帶浠� - inputElement = document.createElement("input") - inputElement.setAttribute("type", "file") - inputElement.style.display = "none" - if (window.addEventListener) { - inputElement.addEventListener("change", this.uploadFile, false) - } else { - inputElement.attachEvent("onchange", this.uploadFile) - } - document.body.appendChild(inputElement) - } - inputElement.click() - } - }, - uploadFile(el) { - if (el && el.target && el.target.files && el.target.files.length > 0) { - console.log(el) - const files = el.target.files[0] - const isLt2M = files.size / 1024 / 1024 < 2 - const size = files.size / 1024 / 1024 - console.log(size) - // 鍒ゆ柇涓婁紶鏂囦欢鐨勫ぇ灏� - if (!isLt2M) { - this.$message.error("涓婁紶澶村儚鍥剧墖澶у皬涓嶈兘瓒呰繃 2MB!") - } else if (files.type.indexOf("image") === -1) { - //濡傛灉涓嶆槸鍥剧墖鏍煎紡 - this.$message.error("璇烽�夋嫨鍥剧墖鏂囦欢") - } else { - const that = this - const reader = new FileReader() // 鍒涘缓璇诲彇鏂囦欢瀵硅薄 - reader.readAsDataURL(el.target.files[0]) // 鍙戣捣寮傛璇锋眰锛岃鍙栨枃浠� - reader.onload = function () { - // 璇诲彇瀹屾垚鍚庯紝灏嗙粨鏋滆祴鍊肩粰img鐨剆rc - that.imageSrc = this.result - console.log(this.result) - // 鏁版嵁浼犲埌鍚庡彴 - //const formData = new FormData() - //formData.append('file', files); // 鍙互浼犲埌鍚庡彴鐨勬暟鎹� - } - } - } + getImageData(data) { + console.log(data, "鍥剧墖鏁版嵁") }, // 杩涘嚭鐐瑰嚮 inOutBoundClick() { -- Gitblit v1.8.0