使用elementPlus 在form 表单中el-upload 上传多张图片，以数组的方式传给后端，目前没啥思路？

  • Z时代
  • 2024-02-27
  • 分类：IT

后端想要的传输格式为名为picture的数组：

{
    "name": "象织社处做",
    "originalCode": "09080909999",
    "mbrandId": "1535822281b5496089c78741696505fd",
    "seriesIds": [
        "a5eff5a4118c4f8cb64feb32366ad26e",
        "b9ef3b15ab09478f8d185dcc943a9e21",
        "7985980693c84aa1992cdb39720fbb46",
        "d84ca325dc4b447a87b48b62388ab4ca"
    ],
    "categoryIds": [
        "184f7481ea9542e59b6b75f1711b62c0",
        "2229c8c2ed7341448b0b09a192264c35",
        "2fe3a8af40024cbabd4d67a93f8c6270",
        "402c43c39d5e4bbe8125f6509a4d8514"
    ],
    "priceList": [
        {
            "typeCode": "purchase_price",
            "price": 68.62
        },
        {
            "typeCode": "latest_purchase_price",
            "price": 99.73
        }
    ],
    "replaceCode": "11",
    "typeId":"1234",
    "picture": ["s400x400.jpeg","00223412.jpg"]
}

我的代码：如下所示

<el-form-item label="商品图片" prop="picture">
                  <el-upload
                    :file-list="fileList"
                    ref="upload"
                    action=""
                    accept="image/jpeg,image/png,image/jpg"
                    list-type="picture-card"
                    :auto-upload="false"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :on-success="handleSuccess"
                  >
                    <el-icon><Plus /></el-icon>
                  </el-upload>
                  <el-dialog v-model="dialogVisible">
                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
                  </el-dialog>
                </el-form-item>

具体往下handleSuccess还没写 不知道该咋写了

回答：

  1. 首先你需要有一个上传的接口。成功之后会有一个 url
  2. 我理解你的 picture 应该是最后保存数据的，里面只要上面的 url

上传文件只能用 formdata 所以大概率不会是 json

回答：

可以参考一下https://blog.csdn.net/v_loadi...^v66^control,201^v3^control_1,213^v2^t3_esquery_v3&spm=1018.2226.3001.4187

以上是 使用elementPlus 在form 表单中el-upload 上传多张图片，以数组的方式传给后端，目前没啥思路？ 的全部内容， 来源链接： utcz.com/p/933271.html

回到顶部