vue上传图片

vite.config.ts配置

 server: {

      port: 4000,

      proxy: {

        // 选项写法

        '/auth': {

          target: 'http://10.20.10.18/',

          changeOrigin: true,

          // rewrite: path => path.replace(/^\/auth/, '')

        },

        '/api': {

          target: 'http://10.20.10.18/',

          changeOrigin: true,

          // rewrite: path => path.replace(/^\/api/, '')

        }

      },

      hmr: {

        overlay: false

      },

      host: '0.0.0.0'

    },

// 上传图片的接口定义

export const uploadImagApi = async (data) => {

  return request.post({

    url: '/api/uploads/images',

    // data: params,

    data,

    headersType: 'application/x-www-form-urlencoded multipart/form-data'

  })

}

// 图片上传的方法定义

const uploadFile: any = (param: UploadRequestOptions) => {

  let formData = new FormData()

  formData.append('file', param.file)

  common.uploadImagApi(formData).then(() => {

    ElMessage.success('上传成功')

  })

}

//elementplus的upload组件使用-上传头像场景

<el-upload :http-request="uploadFile" list-type="picture-card" :auto-upload="true">

              <div class="flex-col justify-center items-center text-[#a3adbf]">

                <div class="w-64px flex justify-center"

                  ><el-icon :size="40" color="#a3adbf"><Plus /></el-icon

                ></div>

                <div class="w-64px">上传照片</div>

              </div>

              <template #file="{ file }">

                <div>

                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />

                  <span class="el-upload-list__item-actions">

                    <span

                      class="el-upload-list__item-preview"

                      @click="handlePictureCardPreview(file)"

                    >

                      <el-icon><zoom-in /></el-icon>

                    </span>

                    <span

                      v-if="!disabled"

                      class="el-upload-list__item-delete"

                      @click="handleDownload(file)"

                    >

                      <el-icon><Download /></el-icon>

                    </span>

                    <span

                      v-if="!disabled"

                      class="el-upload-list__item-delete"

                      @click="handleRemove(file)"

                    >

                      <el-icon><Delete /></el-icon>

                    </span>

                  </span>

                </div>

              </template>

            </el-upload>