feat: 素材库 - 支持更换图片

project/src/components/manage/materialLibrary/dialog/editMaterials.vue

@@ -46,6 +46,7 @@
 
           <div class="imgBtn">
             <el-button type="primary" size="mini" plain @click="openImgCutter()">图片裁剪</el-button>
+            <el-button type="primary" size="mini" plain @click="onClickSelectImg">更换图片</el-button>
           </div>
         </div>
       </div>
@@ -60,13 +61,23 @@
         <imgCutter v-if="imgCutterVisible" :target="oss_url" @imgCutterCallback="imgCutterCallback" source="uploadMaterials"></imgCutter>
       </el-dialog>
 
+      <selectImgDialog
+        :dialogVisible="selectImgVisible"
+        @confirm="onConfirmSelectImg"
+        @cancel="onCancelSelectImg"
+      />
+
     </el-dialog>
 </template>
 <script>
 import imgCutter from '@/components/assembly/imgCutter.vue'
+import selectImgDialog from './selectImgDialog.vue'
 export default {
   name: 'uploadMaterials',
-  components: { imgCutter },
+  components: {
+    imgCutter,
+    selectImgDialog,
+  },
   props: {
     // 控制弹框是否显示
     editVisible: {
@@ -91,7 +102,8 @@ export default {
       oss_url: '',
       loading: false,
       successFile: [],
-      material: {}
+      material: {},
+      selectImgVisible: false,
     }
   },
   watch:{
@@ -151,6 +163,18 @@ export default {
         this.material = Object.assign(this.material, obj.data)
       }
     },
+
+
+    onClickSelectImg() {
+      this.selectImgVisible = true
+    },
+    onConfirmSelectImg(url) {
+      this.material.url = url
+      this.selectImgVisible = false
+    },
+    onCancelSelectImg() {
+      this.selectImgVisible = false
+    },
   }
 }
 </script>

project/src/components/manage/materialLibrary/dialog/selectImgDialog.vue

@@ -0,0 +1,149 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    :before-close="handleCancel"
+    class="selectImg-dialog"
+    :title="title"
+    width="550px"
+    :close-on-click-modal="false"
+    append-to-body
+  >
+    <div class="content-wrap" v-loading="loading">
+      <el-upload
+        ref="upload"
+        class="upload-demo"
+        :action="URL.BASEURL + URL.media_upload"
+        :before-upload="beforeAvatarUpload"
+        :on-success="uploadSuccess"
+        :on-progress='beforeUploadUpload'
+        :on-error='uploadFail'
+        :on-exceed="handleExceed"
+        :file-list="fileList"
+        accept=".jpg,.jpeg,.png"
+        name="file"
+        :data="fileData"
+        :show-file-list="true"
+        list-type="picture"
+        :multiple="false"
+        :limit="1"
+        drag
+      >
+        <div>
+          <i class="el-icon-upload"></i>
+          <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
+          <div slot="tip" class="el-upload__tip">*图片仅支持png或jpg格式，且文件大小不得超过10M。</div>
+        </div>
+      </el-upload>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button size="mini" @click="handleCancel">关 闭</el-button>
+      <el-button size="mini" type="primary" @click="handleConfirm">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    // 控制弹框是否显示
+    dialogVisible: {
+      type: Boolean,
+      default: () => false
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      fileList: [],
+      fileData: {
+        admin_id: this.$cookie.getCookie('admin_id'),
+        ttl: this.$cookie.getCookie('ttl'),
+        sign: this.$cookie.getCookie('sign'),
+        corpid: this.$localSelfStore.getLocal('defaultCorp') && this.$localSelfStore.getLocal('defaultCorp') != 'undefined' ? JSON.parse(this.$localSelfStore.getLocal('defaultCorp')).corpid : '',
+        type: 1,//素材类型。1图片 2语音 3视频
+      },
+
+    }
+  },
+  computed: {
+    title() {
+      return `更换图片`
+    },
+  },
+  watch: {
+    dialogVisible(isShow) {
+      if (isShow) {
+        // this.$refs.upload.clearFiles()
+      } else {
+        this.$refs.upload.clearFiles()
+      }
+    },
+  },
+  methods: {
+    // 限制上传一个文件，重新选择文件替换原来的文件
+    handleExceed(files, fileList) {
+      this.$message.error('最多只能上传一张图片')
+    },
+    beforeAvatarUpload(file) {
+      const isLt10M = file.size / 1024 / 1024 < 10;
+      if (!isLt10M) {
+        this.$message.error('上传头像图片大小不能超过 10MB!');
+      }
+      return isLt10M;
+    },
+    // 上传成功
+    uploadSuccess (res, file) {
+      this.$loading(this.$loadingConfig).close();
+      if (res.errno == 0) {
+        this.$message({
+          message: '上传成功',
+          type: 'success'
+        })
+      } else {
+        this.$message({
+          message: res.err,
+          type: 'warning'
+        })
+      }
+    },
+    beforeUploadUpload (file) {
+      this.$loading(this.$loadingConfig);
+    },
+    // 上传失败
+    uploadFail (file) {
+      this.$loading(this.$loadingConfig).close();
+      this.$message({
+        message: '上传失败',
+        type: 'fail'
+      })
+      let idx = this.$refs.upload.uploadFiles.findIndex(item => item.uid === file.uid)
+      this.$refs.upload.uploadFiles.splice(idx, 1)
+    },
+    handleCancel() {
+      this.$emit('cancel')
+    },
+    handleConfirm() {
+      console.log('this.$refs.upload.uploadFiles => ', this.$refs.upload.uploadFiles)
+      console.log('fileList => ', this.fileList)
+      const { uploadFiles } = this.$refs.upload
+      if (!uploadFiles || !uploadFiles.length) {
+        return this.$message.warning('请上传更换图片')
+      }
+      this.$emit('confirm', uploadFiles[0].response.rst.url)
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.selectImg-dialog {
+  .content-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .dialog-footer {
+    text-align: center;
+  }
+}
+</style>