上传图片-layui结合a-modal查看图片以及layui组件查看图片

 <a-form-model-item label="图片" class="has-label">
          <a-upload :accept="'image/*'" :multiple="true" list-type="picture-card" :file-list="files_arr" action='{:url("$classuri/uploadFile")}?filename=file&fileExt=img' @change="file_change"  @preview="handlePreview":remove="file_remove"  :show-upload-list="{ showPreviewIcon: true, showRemoveIcon: true }"> <a-icon type="plus" /> </a-upload>
        </a-form-model-item>

用a-modal查看图片

let payment_request_form = new Vue({
      el:"#payment_request_form",
      data () {
        return {
          currentIndex: 0,
          previewVisible:false,
          previewImage:'',
        
          loading: false,
          isClickable: true,// 控制按钮是否可点击的状态变量
          files_uid: [],
          payment_country_list: paymentCountry,
          resultArr:[],
          BtnArr:[],
          files_arr: (function () {
            if(data){
              var arr = data.follow_img?data.follow_img:[];
              console.log(arr,arr.length,data.follow_img,'arr')
              var new_arr = []
              if (Array.isArray(arr)){
                if(arr.length>0){
                console.log(arr.length,'kjiu8')
                arr.forEach(function(item,index){
                  console.log(item.index,'lllkkk')
                  new_arr.push({
                    uid: '-'+(index+1),      // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
                    name: 'img_'+(index+1),   // 文件名
                    status: 'done', // 状态有：uploading done error removed
                    thumbUrl: '__YOUPAIYUN_DOMAIN__/'+item+'!/sq/100',
                    url: item,
                  })
                });
              }
              }
              return new_arr;
            }else{
              var new_arr = []
              return new_arr;
            }
            })(),
          form: {
            follow_img:[],
            buyer_demands: null,
            follow_up_result:null,
            follow_up_stage:null,
            follow_up_tag:null,
            solution:'',
            user_id:data?data.user_id:param.user_id,
            id:null,
          },
          rules:{
						required: [{ required: true, message: '必填项，请选择客户当前跟进阶段。', trigger: 'change'}],
					}
        }
      },
      mounted () {
        if(data){
          let that=this
          that.form=data
          console.log(data,that.form,'formform')
          console.log(data.user_id,that.form.user_id,'formfor111m')

          console.log(paymentCountry,that.form.follow_up_result,that.form,data,'llkk')
          if(that.form.follow_img.length>0){
            that.form.follow_img = that.formData_files_arr();
          }
          if(that.form.follow_up_stage==1){
            that.resultArr=[]
            that.BtnArr=[]
          }else {
          that.resultArr=[]
          that.resultArr=paymentCountry[data.follow_up_stage-1].child
         console.log(that.resultArr,paymentCountry[data.follow_up_stage-1].child,'jjj2')
         that.BtnArr=[]
         console.log(paymentCountry[data.follow_up_stage-1].child,paymentCountry[data.follow_up_stage-1].child[data.follow_up_result-1].child,'paymentCountry[data.follow_up_stage-1].child[data.follow_up_result]8')
         that.BtnArr=paymentCountry[data.follow_up_stage-1].child[data.follow_up_result-1].child
         if(this.BtnArr.length>0){
          this.viewBtn=true
          this.viewtext=true
         }
          }
      
   }
      },
      created(){
       
      },
      methods: {
        handleClose(){
          layer.closeAll();
        },
        submitForm() {
        if (!this.isClickable) {
          return; // 如果按钮不可点击，则直接返回，不执行后续逻辑
        }
        // 禁用按钮
        this.isClickable = false;
        // 执行提交操作
        this.submit();
        // 启用按钮（延迟一定时间后启用，这里设定为1秒）
        setTimeout(() => {
          this.isClickable = true;
        }, 1000);
      },
        
        
        handlePreview(file) {
          console.log(file, 'file');
          const baseUrl = '__YOUPAIYUN_DOMAIN__';
          this.previewVisible = true;
          this.currentIndex = this.files_arr.indexOf(file);

          if (file.url) {
            console.log('修改');
            this.previewImage = `${baseUrl}/${file.url}`;
          } else {
            console.log('新增');
            this.previewImage = `${baseUrl}/${file.response.data.site_url}`;
          }

          console.log(this.previewImage, '1');
        },
        handleCancel() {
          this.previewVisible = false;
        },
        prevImage() {
          console.log(this.files_arr, 'files_arr前面');
          if (this.currentIndex > 0) {
            this.currentIndex -= 1;
            const baseUrl = '__YOUPAIYUN_DOMAIN__';
            const prevFile = this.files_arr[this.currentIndex];
            if (prevFile.url) {
              console.log('前一张 (URL)');
              this.previewImage = `${baseUrl}/${prevFile.url}`;
            } else {
              console.log('前一张 (Site URL)');
              this.previewImage = `${baseUrl}/${prevFile.response.data.site_url}`;
            }
          }
        },
        nextImage() {
          console.log(this.files_arr, 'files_arr后面');
          if (this.currentIndex < this.files_arr.length - 1) {
            this.currentIndex += 1;
            const baseUrl = '__YOUPAIYUN_DOMAIN__';
            const nextFile = this.files_arr[this.currentIndex];
            console.log(nextFile, 'nextFile后面');
            if (nextFile.url) {
              console.log('后一张 (URL)');
              this.previewImage = `${baseUrl}/${nextFile.url}`;
            } else {
              console.log('后一张 (Site URL)');
              this.previewImage = `${baseUrl}/${nextFile.response.data.site_url}`;
            }
          }
        },
        file_change: function(info){
            if (info.file.status == 'uploading' && !this.files_uid.includes(info.file.uid)) {
              this.files_uid.push(info.file.uid);
              info.file.url = '';
              this.files_arr.push(info.file);
            }
            if (info.file.status === 'done') {
              let res = info.file.response // 后端返回的数据
              if(res['code'] == 'SUCCESS'){
                this.form.follow_img = this.formData_files_arr();
              }else{
                this.$message.error(res['msg']);
                console.log('909')
                this.removeFileFromList(info.file.uid);
                return;
              }
            } else if (info.file.status === 'error') {
              this.$message.error(`${info.file.name} file upload failed.`);
            }
          },
          removeFileFromList: function(uid) {
            console.log('1233454')
            this.files_arr = this.files_arr.filter(file => file.uid !== uid);
          },
          file_remove: function(info){
            console.log('6555')
            var $this = this;
            this.files_arr.forEach(function(item,index){
              console.log(this.files_arr,item,info,'iuinfo')
              if(item.uid === info.uid){
                $this.$delete($this.files_arr,index);
              }
            });
            this.form.follow_img = this.formData_files_arr();

            $($this.form.video).each(function (i,el) {
              if(el.uid === info.uid){
                $this.$delete($this.form.video, i);
                return false;
              }
            });

          },
          formData_files_arr: function () {
            var arr = [];
            this.files_arr.forEach(function(item,index){
              if(item.status === 'done'){
                arr.push(item.url||item.response.data.site_url);
              }
            });
            return arr;
          },
        handleBtn(item,index){
          console.log(item,index,'kkj')
          this.form.follow_up_tag=index
          this.view=false
          if(this.form.follow_up_tag===0||this.form.follow_up_tag){
            this.viewRule2=false
          }
        },
      
        before_upload(file, size, file_type) {
          console.log(file, 'file');
          if(!file_type.includes(file.type)){
            this.$message.error('文件格式不正确，请重新选择');
            return false;
            this.loading = false
          }
        },
          /**
           *  下拉框内容锁定
           */
           trigger_node() {
            return document.getElementById('payment_request_form')
          },
       
      },
    })片

用layui自带的查看图片

<td class="mdui-text-center">
              <div v-if="v.follow_img" style="height: 60px; overflow: hidden;" class="J-view_pictures" >
                <a
                  v-for="(iv, ik) in v.follow_img"
                  :key="ik"
                  class="mdui-text-color-blue-500"
                >
                  <img
                    :src="`__YOUPAIYUN_DOMAIN__/${iv}`"
                    style="width: 60px; height: 60px; object-fit: cover;"
                    alt="" 
                    :layer-src="`__YOUPAIYUN_DOMAIN__/${iv}`"
                  >
                </a>
              </div>
            </td>
methods(){
this.$nextTick(() => {
        $('body').find('.J-view_pictures').each(function (i, e) {
          $(e).viewer({
            url: 'layer-src',
            fullscreen: false,
          });
        });
      });}