后台返回图片多个,图片之间用逗号隔开,轮播图展示这些图片

computed: {
    ImgMounted() {
      return function (index) {
        if (index) {
          return index.split(",");
        }
      };
    },
  },
<div class="main_title" style="border: 1px solid #1c1c1c1c">
    <el-carousel height="400px" trigger="click">
         <el-carousel-item v-for="item in ImgMounted(companyInfoData.honorImg)":key="item">
               <img :src="item" alt=""/>
         </el-carousel-item>
    </el-carousel>
</div>

当你想要一次上传多图片到服务器并作为一个blob存储时,通常的做法不是简单地用逗号分隔,而是通过一种常见的技术,例如使用FormData或FileReader API。下面是一种常见的做法: 1. **前端上传**: - 使用HTML的`input[type=file]`元素让用户选择多个图片文件,或者一次性选取。 - 创建一个FormData对象,将选中的图片文件添加进去,文件名通常会被保留。 示例: ```javascript let formData = new FormData(); for(let i = 0; i < files.length; i++) { formData.append('images[]', files[i]); } ``` 2. **后端接收**: - 后端收到的是一个包含多个文件的数据结构,比如Node.js的`multer`中间件可以处理这种请求。 - 将所有文件合并为一个blob,或者分别保存到数据库(如MongoDB的Binary数据类型)或文件系统(多个文件)。 3. **返回时处理**: - 当从后端获取到blob时,可以将其打包成JSON响应,其中包含一个指向blob的url(通常使用base64编码),或者提供一个下载链接等。 示例: ```json { "blobUrl": "data:image/jpeg;base64," + btoa(blob), "fileNames": ["image1.jpg", "image2.png"] } ``` 前端可以通过解析这个JSON响应,然后根据文件名再次解析blob,例如: ```javascript let blobUrlArray = JSON.parse(response).blobUrl.split(','); for(let i = 0; i < blobUrlArray.length; i++) { let blob = atob(blobUrlArray[i].replace("data:image/jpeg;base64,", "")); // ...进一步处理每个blob } ``` 注意,这种方式并不适用于大文件的上传,因为它可能会造成性能问题。对于大文件,通常建议仍然分开上传、处理和返回
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值