提交 图片上传添加尺寸

guoyujie

6 天以前 bfb2de990eb9cdb3f1bf8dfbdab5135f78b7dc6f

 north-glass-erp/northglass-erp/src/components/sd/order/UploadPicture.vue

@@ -24,6 +24,8 @@
  orderId:null,
  state:null
})
let imgWidth = ref(null)
let imgHeight = ref(null)

const form = reactive({
  format: 'png'
@@ -40,6 +42,8 @@
    }
    result.value = res.data
    conversionResult.value = res.data.imageBase64
    imgWidth.value = res.data.width
    imgHeight.value = res.data.height
  })
}

@@ -107,6 +111,22 @@
      ElMessage.warning(t("order.msg.pleaseUploadPicture1"))
      return
    }
    if(imgHeight.value ){
      const regex = /^(0|[1-9]\d{0,2}|1000)$/
      if(!regex.test(imgHeight.value)){
        ElMessage.warning(`height:0~1000`)
        return
      }
    }

    if(imgWidth.value ){
      const regex = /^(0|[1-9]\d{0,2}|1000)$/
      if(!regex.test(imgWidth.value)){
        ElMessage.warning(`width:0~1000`)
        return
      }
    }

    loadingFormats.value = true

    converting.value = true
@@ -124,7 +144,9 @@

    const data ={
      file:fileList.value[0].raw,
      name:fileList.value[0].raw.name
      name:fileList.value[0].raw.name,
      width:imgWidth.value || 1000,
      height:imgHeight.value || 700,
    }
    request.post(`/orderFile/updateOrderFileByOrderNumber/${props.orderId}/${props.rowIndex.orderNumber}`,data).then(res=>{
      if (res.code === '200') {
@@ -244,9 +266,27 @@
          {{$t("order.msg.pleaseUploadPicture10")}} <em>{{$t("order.msg.pleaseUploadPicture11")}}</em>
        </div>
        <template #tip>
          <div class="el-upload__tip" style="width: 30%;margin-left: 35%">
            <el-row>
              <el-col :span="12">
                <el-input
                    v-model.number="imgWidth"
                    placeholder="宽"/>
              </el-col>
              <el-col :span="12">
                <el-input
                    v-model.number="imgHeight"
                    placeholder="高"/>
              </el-col>
            </el-row>
          </div>



          <div class="el-upload__tip">
            {{$t("order.msg.pleaseUploadPicture12")}}
          </div>

        </template>
      </el-upload>

@@ -307,7 +347,7 @@
                    :src="conversionResult"
                    :preview-src-list="[conversionResult]"
                    fit="contain"
                    style="max-height: 600px;"
                    :style="{width: `${imgWidth}px`, height: `${imgHeight}px`}"
                >
<!--                  <template #error>-->
<!--                    <div class="image-slot">-->
@@ -418,6 +458,7 @@
  margin: 20px 0;
  display: flex;
  justify-content: center;
  overflow: auto;
}

.file-info {