vue上传图片

<template>
  <div class="textarea">
    <Field required label="上传图片">
      <template #input>
        <Uploader
          :after-read="uploadFile"
          v-model="idFront"
          :multiple="false"
          :max-count="1"
        >
          <div class="van-uploader__wrapper">
            <div
              class="van-uploader__upload"
              style="
                background-image: url('https://qn.jwshq.cn/sample/front.png');
              "
            />
          </div>
        </Uploader>
      </template>
    </Field>
  </div>
</template>

<script>
import { Field, Toast, Uploader, } from 'vant';
import 'vant/lib/index.less';
import { resize } from '@/utils/resize';

export default {
  name: 'Demo',
  components: {
    Field, Toast, Uploader
  },
  data () {
    return {
      idFront: [],
    }
  },
  created () {
    resize()
  },
  methods: {
    uploadFile (file) {
      file.status = 'uploading';
      file.message = '上传中';
      let formData = new FormData();
      formData.append('file', file.file);
      console.log(formData, file.file, '上传图片')
      this.$http.post('/app/upload/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then((r) => {
        file.imageId = r.data.data;
        file.status = 'done';
        file.url = 'https://qn.jwshq.cn/' + file.imageId + '/50';
      }).catch(() => {
        file.status = 'failed';
      });
    },
  },
}
</script>