vue3+Vant UI 表单内文件上传

vanui官网

<van-form>
	 <van-cell-group inset>
		<van-field name="fileurl" label="简历/作品">
              <template #input>
                <van-uploader
                  v-model="formData.fileurl"
                  :max-size="50 * 1024 * 1024"
                  accept="file"
                  :limit="5"
                  :after-read="afterRead"
                >
                  <template #preview-cover="scope">
                    <div class="preview-cover van-ellipsis">
                      {{ scope.name }}
                    </div>
                  </template>
                </van-uploader>
              </template>
		 </van-field>
	 </van-cell-group>
 </van-form>

export default {
  setup() {
  let formData = reactive({
	fileurl: [
        {
          url: "https:xxx.doc",
          name: "111",
        },
      ],
	})
	 const afterRead = ({ file }, { index }) => {
      let fileFormData = new FormData();
      fileFormData.append(file.name, file);
      let val = fileFormData.get(file.name);
      request
        .$file(
          "/pub/upload",
          { file: val },
          { headers: { "Content-Type": "multipart/form-data" } }
        )
        .then((res) => {
          console.log(formData.fileurl);
          formData.fileurl[index] = { url: res.data.url, name: file.name };
        });
    };
     return {
     formData,
     afterRead
     }
  }
  }