有赞Vue UI组件库Vant Uploader组件上传示例

| DevFAQ | Vue Vant axios

代码结构

  1. 基于axios接口层:api/base.js
  2. Vue组件Upload.vue

代码示例

接口层

  1. import request from '@/utils/request'
  3. export function uploadPic (params) {
  4.   return request({
  5.     url: 'http://example.com/upload/image', // 替换成您需要上传的接口
  6.     method: 'post',
  7.     data: params
  8.   })
  9. }

上传组件

  1. <template>
  2.   <van-uploader :after-read="onRead">
  3.     <van-icon name="photograph" />
  4.   </van-uploader>
  5. </template>
  6. <script>
  7. import { uploadPic } from '@/api/base'
  8. export default {
  9.   data () {
  10.     return {
  11.     }
  12.   },
  13.   methods: {
  14.     onRead (file) {
  15.       var data = new FormData()
  16.       data.append('file', file.file)
  17.       uploadPic(data).then((data) => {
  18.         console.log(data)
  19.       })
  20.     }
  21.   }
  22. }
  23. </script>
  24. <style scoped>
  25. </style>

代码说明

  1. 接口层/utils/request.js 使用的是PanJiaChen/vueAdmin-template 项目中request.js
  2. 接口层中url替换成您需要上传接口即可
  3. 组件层中after-read方法既onRead方法中传入的file包含两个属性：content和file。content就是file的base64，可以做图片预览用，使用file.content调用
  4. 接上一条那上传file就应该是file.file
  5. 此处上传文件如果是表单模式上传应该使用new FormData构建一个表单对象，这个是关键，否则会返回400 Bad reques错误。FormData类参考