vue-Vant组件上传图片

<van-uploader v-model="fileList" multiple :max-count="1" class = "image"  :after-read="afterRead" :max-size="20 * 1024 * 1024"
      enctype="multipart/form-data"/>
      <br />
      <van-button type="info" size="normal" @click.prevent="submitimage" native-type="button" class="img">上传图片</van-button>

@click.prevent
在表单中，除了提交按钮外，可能还有一些其他的功能性按钮，如发送验证码按钮。在使用这些按钮时，要注意将native-type设置为button，否则会触发表单提交。

 afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file.file)
      // const result = await uploadimage(file.file)
      // console.log(result)
      // var url = null
      // blob二进制流
      // const URL = window.URL || window.webkitURL
      // url = URL.createObjectURL(file.file)
      // console.log(typeof url)
      // console.log(url.slice(5))
      // const resulturl = url.slice(5)
      // console.log(resulturl)
      // this.file = resulturl
      // this.files = file
      // 在这块创建FormData对象
      // FormData 对象的使用：
      // 1.用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString
      // 2. 异步上传二进制文件。
      // 上传图片需要转换二进制这里要用到FormData
      const forms = new FormData()
      // 这里的file表示给后台传的属性名字，这里看接口文档需要传的的属性
      forms.append('file', file.file) // 获取上传图片信息
      this.files = file
      return file
      // const result = uploadimage(forms)
      // console.log(result)
      // const uploadimage = file => requests({
      //   method: 'post',
      //   url: '/uploadTest',
      //   file,
      //   headers: { 'Content-Type': 'multipart/form-data' }
      // })
      // const result = await requests.post('/uploadTest', file, { headers: { 'Content-Type': 'multipart/form-data' } })
      // console.log(result)
    },
    async submitimage () {
      // 提交上传图片的数据
      console.log('发送数据')
      console.log(this.files)
      const { fileList } = this
      const testimgurl = { fileList }
      // console.log(testimgurl)
      console.log(testimgurl.fileList[0])
      if (testimgurl.fileList[0] === undefined) {
        Toast.fail('请上传图片')
        return 'error'
      }
      // console.log('未上传图片的信息')
      // if (this.files.File !== undefined) {
      //   alert('上传图片成功')
      // } else {
      //   alert('请重新上传图片')
      // }
      // 在这块创建FormData对象
      // FormData 对象的使用：
      // 1.用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString
      // 2. 异步上传二进制文件。
      // 上传图片需要转换二进制这里要用到FormData
      const forms = new FormData()
      // 这里的file表示给后台传的属性名字，这里看接口文档需要传的的属性
      forms.append('file', this.files.file) // 获取上传图片信息
      const result = await uploadimage(forms)
      console.log(result)
      if (result.status === 200) {
        console.log('上传图片成功')
      } else {
        alert('上传图片失败')
      }
    },

限制图片的大小

if (testimgurl.fileList[0] === undefined) {
        console.log('未储存图片')
      } else {
        var size = testimgurl.fileList[0].file.size
        console.log(size)
        if (size > (5 * 1024 * 1024)) {
          Toast.fail('文件大小不能超过 5M')
          // console.log('图片太大，请重新选择')
          return 'error'
        }
      }