1.新增照片上传功能 2.新增图片配置

南骏 池

2025-03-21 daede3be8445e09aa261e1362b5a88bf7bb9d5ec

1.新增照片上传功能
2.新增图片配置

 H5/Js/LLJ/Add.js

@@ -280,7 +280,7 @@
                                }
                            });
                            that.tableData = tableData;

                            that.GetImageFileByGid();
                            //if (that.tableData.length === 0) {
                            //    that.isShowTable = true;
                            //}
@@ -405,6 +405,7 @@

        async afterRead(file) {
            try {
                //alert(APIURL_IMAGE);
                // 1. 显示上传中状态
                file.status = 'uploading';
                file.message = '上传中...';
@@ -456,6 +457,30 @@
                // 8. 强制更新视图（Vant 3+ 可能需要）
                this.$nextTick();
            }
        }
        },
        //获取图片信息
        GetImageFileByGid() {
            const that = this;
            that.AxiosHttp("post", 'Llj/getImage', {
                gid: that.formData.guid,
                Remarks: that.remarks
            }, true, 0).then(res1 => {
                if (res1.status === 0) {
                    // 关键转换：将后端数据转换为 van-uploader 需要的格式
                    that.fileList = res1.data.tbBillList.map(item => ({
                        url: `${APIURL_IMAGE}/${item.urlPath}`,  // 拼接完整访问路径
                        status: 'done',          // 标记为已上传成功
                        name: item.fileTitle,    // 可选显示文件名
                        message: '已上传',        // 可选状态文字
                        // 保留原始数据（按需）
                        id: item.guid
                    }));
                } else {
                    that.$toast.fail(res1.rtnMsg);
                }
            }).catch(error => {
                that.$toast.fail("网络错误，请重试！");
            });
        },
    }
})

 H5/LLJ/Add.aspx

@@ -233,6 +233,25 @@
                padding: 8px 12px;
            }

            /* 图片上传大小 */
            .van-uploader__preview-image {
              width: 80px;
              height: 80px;
              object-fit: cover;
            }
            .van-uploader__upload{
              width: 80px;
              height: 80px;
            }
            .uploader-container {
              height: auto;
              overflow-y: auto;
              -webkit-overflow-scrolling: touch; /* 流畅滚动（iOS） */
            }
            .van-uploader__preview-delete-icon{
                    font-size: 1.8em;
            }

        </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
@@ -329,7 +348,23 @@
           </van-dialog>
            </van-cell-group>
        </div>
             <div><van-uploader v-model="fileList" :after-read="afterRead" /></div>     
     <!-- 方式 -->
             <div class="uploader-container">
  <!-- 使用 field 样式包裹 -->
  <div class="van-cell van-field" style="padding: 10px 16px">
    <!-- 左侧标签 -->
    <div class="van-field__label" style="width: 90px">图片上传</div>
    
    <!-- 右侧上传区域 -->
    <div class="van-field__body" style="flex: 1">
      <van-uploader 
        v-model="fileList" 
        :after-read="afterRead"
        style="padding: 8px 0"
      />
    </div>
  </div>
</div>  
<%--            <van-button :loading="ttrre" type="info" loading-text="加载中..." v-if="!isShowTable && formData.fsubmit == 0" @click="submit">检验提交</van-button>
            <van-button type="danger" v-if="!isShowTable && formData.fsubmit == 0" @click="removeXJ">重新加载项目</van-button>--%>
<%--            <van-button :loading="ttrre"  type="info" loading-text="加载中..."  @click="submit">检验提交</van-button>

 Mst.master

@@ -11,7 +11,7 @@
    <script src="/Scripts/vue.min.js"></script>
    <script src="/Scripts/js.cookie.min.js"></script>
    <script src="/scripts/axios0.25.0.js"></script>
    <script src="/scripts/config.js?<%=1234 %>"></script>
    <script src="/scripts/config.js?<%=1236 %>"></script>
    <link href="/scripts/vant/vant.css" rel="stylesheet" />
    <script src="/scripts/vant/vant.js"></script>
    <link href="/Images/Style.css?<%=16991 %>" rel="stylesheet" />

 Scripts/config.js

@@ -1,6 +1,7 @@
//var APIURL = "http://192.168.1.145:83/api/";
var APIURL = "http://localhost:5204/api/";
var APIURL = "http://192.168.1.145:83/api/";
//var APIURL = "http://localhost:5204/api/";
var APIURL_PC = "http://192.168.1.145:81/";
var APIURL_IMAGE = APIURL_PC+"upload/";
var ISNEEDLOGIN = true;
String.prototype.trim = function () {
    return this.replace(/(^\s*)|(\s*$)/g, "");