二维码展示问题

src/views/company/companyUser/index.vue

@@ -110,6 +110,37 @@
           <el-table-column label="员工后台昵称" align="center" prop="nickName" :show-overflow-tooltip="true" 员工后台  width="100"/>
           <el-table-column label="部门" align="center" prop="deptName" :show-overflow-tooltip="true" />
           <el-table-column label="手机号码" align="center" prop="phonenumber" width="120" />
+          <el-table-column label="二维码" align="center" prop="qrCodeWeixin">
+            <template slot-scope="scope">
+              <!-- 显示已上传的二维码 -->
+              <el-image
+                v-if="scope.row.qrCodeWeixin"
+                style="width: 80px; height: 80px; margin-bottom: 5px; display: block; margin-left: auto; margin-right: auto;"
+                :src="scope.row.qrCodeWeixin"
+                :preview-src-list="[scope.row.qrCodeWeixin]"
+                fit="contain">
+                <div slot="error" class="image-slot">
+                  <i class="el-icon-picture-outline"></i>
+                </div>
+              </el-image>
+              <!-- 上传组件 -->
+              <el-upload
+                class="avatar-uploader"
+                action="#"
+                :show-file-list="false"
+                :http-request="(options) => handleCustomUpload(options, scope.row)"
+                :before-upload="(file) => beforeImageUpload(file, scope.row)"
+              >
+                <el-button size="small" type="primary" :loading="scope.row.uploading">
+                  {{ scope.row.qrCodeWeixin ? '更换图片' : '上传图片' }}
+                  <i class="el-icon-upload el-icon--right"></i>
+                </el-button>
+              </el-upload>
+              <div v-if="scope.row.uploadError" class="el-upload__tip" style="color: red;">
+                {{ scope.row.uploadError }}
+              </div>
+            </template>
+          </el-table-column>
           <el-table-column label="状态" align="center">
             <template slot-scope="scope">
               <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
@@ -468,11 +499,13 @@ import { syncDept } from '@/api/qw/qwDept';
 import { getMyQwUserList,getMyQwCompanyList } from "@/api/qw/user";
 import  selectUser  from "@/views/company/components/selectQwUser.vue";
 import { getConfigByKey } from "@/api/company/companyConfig";
+import axios from "axios";
 export default {
   name: "User",
   components: { Treeselect ,selectUser},
   data() {
     return {
+      uploadUrl: process.env.VUE_APP_BASE_API+"/company/user/common/uploadOSS",
       // 遮罩层
       loading: false,
       qwUserList:[],
@@ -1108,7 +1141,104 @@ export default {
         }
       });
     },
+    /**
+     * 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise且被 reject，则停止上传。
+     * @param {File} file - 用户选择的文件对象
+     * @param {Object} row - 当前行的数据对象
+     */
+    beforeImageUpload(file, row) {
+      // 清除之前的错误信息
+      this.$set(row, 'uploadError', '');
+      const isJPG = file.type === 'image/jpeg';
+      const isPNG = file.type === 'image/png';
+      const isGIF = file.type === 'image/gif'; // 根据需要添加更多格式
+      const isValidFormat = isJPG || isPNG || isGIF;
+      const isLt2M = file.size / 1024 / 1024 < 2; // 限制图片大小为 2MB
+      if (!isValidFormat) {
+        const errorMsg = '上传二维码图片只能是 JPG/PNG/GIF 格式!';
+        this.$message.error(errorMsg);
+        this.$set(row, 'uploadError', errorMsg); // 在行内显示错误
+        return false;
+      }
+      if (!isLt2M) {
+        const errorMsg = '上传二维码图片大小不能超过 2MB!';
+        this.$message.error(errorMsg);
+        this.$set(row, 'uploadError', errorMsg); // 在行内显示错误
+        return false;
+      }
+      return true; // 校验通过，允许上传
+    },
+    /**
+     * 自定义上传方法
+     * @param {Object} options - Element UI upload 组件传递的参数，包含 file, onSuccess, onError, onProgress 等
+     * @param {Object} row - 当前行的数据对象
+     */
+    async handleCustomUpload(options, row) {
+
+      const file = options.file;
+      const formData = new FormData();
+      formData.append('file', file);
 
+      formData.append('userId',row.userId)
+
+      this.$set(row, 'uploading', true);
+      this.$set(row, 'uploadError', '');
+      try {
+        const response = await axios.post(this.uploadUrl, formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data',
+          },
+          onUploadProgress: progressEvent => {
+            const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+            console.log(`上传进度: ${percentCompleted}%`);
+          }
+        });
+        if (response.data && (response.data.url || (response.data.data && response.data.data.url))) {
+          const imageUrl = response.data.url || response.data.data.url;
+          this.$set(row, 'qrCodeWeixin', imageUrl); // 更新行数据中的图片URL
+          this.$message.success('图片上传成功!');
+          options.onSuccess(response.data, file); // 通知el-upload上传成功 (虽然我们自定义了，但调用一下也无妨)
+        } else {
+          const errorMsg = response.data.message || '图片上传失败，服务器未返回有效URL';
+          this.$message.error(errorMsg);
+          this.$set(row, 'uploadError', errorMsg);
+          options.onError(new Error(errorMsg), file); // 通知el-upload上传失败
+        }
+      } catch (error) {
+        console.error('上传失败:', error);
+        let errorMsg = '图片上传失败';
+        if (error.response && error.response.data && error.response.data.message) {
+          errorMsg = error.response.data.message;
+        } else if (error.message) {
+          errorMsg = error.message;
+        }
+        this.$message.error(errorMsg);
+        this.$set(row, 'uploadError', errorMsg);
+        options.onError(error, file); // 通知el-upload上传失败
+      } finally {
+        this.$set(row, 'uploading', false); // 无论成功失败，结束上传状态
+      }
+    },
+    requestUpload() {
+    },
+    beforeUpload(){
+      console.log(file.type)
+      const isPic =
+        file.type === 'image/jpeg' ||
+        file.type === 'image/png' ||
+        file.type === 'image/gif' ||
+        file.type === 'image/jpg' ||
+        file.type === 'audio/mpeg'
+      const isLt2M = file.size / 1024 / 1024 < 2
+      if (!isPic) {
+        this.$message.error('上传图片只能是 JPG、JPEG、PNG、GIF 格式!')
+        return false
+      }
+      if (!isLt2M) {
+        this.$message.error('上传头像图片大小不能超过 2MB!')
+      }
+      return isPic && isLt2M
+    },
   },
 };
 </script>