van-uploader上传图片

<van-uploader
    :disabled="form.status=='1'"
     style="display: flex;"
     v-model="fileList"
     multiple
     :max-count="4"
     :after-read="afterRead">
     <div style="width: 100%;" v-show="fileList.length < 4">      
     <img style="width:100%;height:75px;"src="./images/uploadbg.png" alt=""></div>
 </van-uploader>
new Vue({
	fileList: [],
	formData: new FormData(),
	form: {}
})
methods: {
	afterRead(file) {
      if(file instanceof Array) {
      // 多张图片
        file.forEach(f => {
          this.formData.append('files',f.file)
        })
      }else{
      // 单张图片
        this.formData.append("files",file.file)
      }
    },
    // 提交按钮	
    submitBtn() {
      if(this.fileList.length <= 0) {
        vant.Toast('提示内容');
        return;
      }
      vant.Toast.loading({
        duration: 0,
        message: '提交中...',
        forbidClick: true
      });
      // api 要求传参 pathCode (根据api而定)
      this.formData.append('pathCode','0102')
      axios({
      	// 上传图片到服务器api
        url:`https://www.qyflc.com/gateway-api/file/uploads`,
        data:this.formData,
        method:'POST',
        headers: {
          "content-type": "multipart/form-data",
        }
      }).then((res) => {
        this.form.status = '1'
        this.form.images = res.data.data.map((item) => {
          return item.url
        })
        // 上传图片成功后的处理逻辑,仅上传功能可以无视
        return axios({
          url:`https://www.qyflc.com/gateway-api/device/maintain`,
          data:this.form,
          method:'PUT',
        }).then((response) => {
          if(response.data.code == '200') {
          	// 强制刷新页面
            location.reload()
            vant.Toast.clear()
            vant.Toast.success('提交成功');
          }else{
            vant.Toast.fail('提交失败');
          }
        })
      })
    },
}
### 关于 `van-uploader` 实现多图片上传前端开发中,`vant` 提供了一个功能强大的文件上传组件——`van-uploader`。通过配置该组件的相关属性,可以轻松实现多图片上传的功能。 以下是基于 `vant` 的 `van-uploader` 组件实现多图片上传的具体方法: #### 属性说明 - **v-model**: 可以绑定到一个数组变量上,用来存储选中的文件列表。 - **multiple**: 设置为 `true` 时允许一次选择多个文件[^1]。 - **max-count**: 定义最多可以选择的文件数量。 - **after-read**: 图片加载完成后触发的回调函数,在此函数中可处理图片预览逻辑或者发起网络请求上传图片。 下面是一个完整的 Vue.js 示例代码展示如何利用这些特性来完成多张图片的选择与上传操作: ```vue <template> <div> <!-- van-uploader --> <van-uploader v-model="fileList" :multiple="true" :max-count="9" @after-read="handleAfterRead"> <van-button icon="photograph">上传照片</van-button> </van-uploader> <!-- 已经上传成功的图片显示区域 --> <div class="preview-area"> <img v-for="(item, index) in previewImages" :key="index" :src="item.url" alt="" /> </div> </div> </template> <script> export default { data() { return { fileList: [], // 存储当前已选择但尚未上传至服务器端的文件对象集合 previewImages: [] // 显示已经成功上传后的远程地址链接组成的数组 }; }, methods: { handleAfterRead(file) { if (Array.isArray(file)) { // 如果是一次选择了多张图,则 file 是个数组 this.fileList.push(...file); // 假设这里模拟异步上传过程并获取返回的结果url const uploadedUrls = file.map(() => 'https://example.com/some-image.jpg'); this.previewImages.push(...uploadedUrls); } else { // 单独一张的情况 this.fileList.push(file); // 同样假设这是实际接口调用部分... let urlFromServer = 'https://example.com/another-image.jpg'; this.previewImages.push({url: urlFromServer}); } console.log('Files after read:', this.fileList); } } }; </script> <style scoped> /* 自定义样式 */ .preview-area img{ width:80px; height:auto; margin-right:10px; } </style> ``` 上述示例展示了如下几点: - 如何设置 `v-model` 来追踪用户所选文件的状态; - 利用了 `@after-read` 方法监听每张新加入的照片,并对其进行进一步的操作比如立即提交给后台服务; - 还有就是当支持批量添加的时候需要注意区分单个还是组合作为参数传递过来的情形。 #### 注意事项 为了提升用户体验以及满足业务需求,开发者还可以考虑增加一些额外的功能点,例如进度条指示器、错误提示框等辅助控件。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值