vue vant实现上传图片

最新推荐文章于 2025-03-01 22:20:14 发布

至少零下七度

最新推荐文章于 2025-03-01 22:20:14 发布

阅读量903

点赞数 1

分类专栏： vue vant weapp 文章标签： vue

本文链接：https://blog.youkuaiyun.com/mqq_12/article/details/119106407

版权

本文介绍如何在Vue项目中结合Vant组件库实现图片上传功能，包括选择图片、预览、上传到服务器及错误处理等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div id="root">
    	<van-uploader
              v-model="fileList"
              :before-read="beforeRead"
              :after-read="afterRead"
              :max-size="isOverSize"
              :max-count="6"
              />
    </div>
</template>

export default {
  data() {
    return {
        }
  },
  methods: {
    afterRead(file) {
      const fromdata = new FormData()
      // FileImg 上传参数名
      fromdata.append('FileImg', file.file)
      console.log(file.file)
      this.$http.post('/allorder/upload', fromdata, {
        headers: {
          'content-type': 'multipart/form-data'
        }
      }).then(res => {
        console.log('图片上传', res)
      })
    },
    // 返回布尔值
    beforeRead(file) {
      console.log(file.type)
      if (file.type !== 'image/jpeg

最低0.47元/天解锁文章