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