antd vue上传图片至后端

原创

已于 2022-08-08 19:28:55 修改 · 5.3k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-08-08 19:22:33 首次发布

最近项目有个需求需要在前端vue上传图片，然后在后端将图片存到本地的一个文件夹下。

1、vue

这里是将上传图片封装成了一个组件来使用，组件名为 upload-image.vue

<template>
  <div class="clearfix">
    <!--
        name    —— 向后端传递数据时会要用到
        action  —— 后端路径
    -->
    <a-upload
        name="faceImage"            
        :headers="headers"
        :action="fileurl"
        list-type="picture-card"
        v-model:file-list="fileList"
        :before-upload="beforeUpload"
        @preview="handlePreview"
        @change="handleChange"
    >
      <div v-if="fileList.length < imgNum">
        <a-icon type="plus" />
        <div class="ant-upload-text">
          上传图片
        </div>
      </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>

<sc