webapi+vue3实现前后端图片传输

He少年

于 2025-01-03 11:43:44 发布

阅读量1.1k

点赞数 11

CC 4.0 BY-SA版权

文章标签： c# asp.net vue.js 图像处理

本文链接：https://blog.youkuaiyun.com/vsmybits/article/details/144906788

webapi+vue3实现前后端图片传输

2.前端代码

<template>
   <div class="Thisform">
     <el-form ref="form" :model="form" label-width="80px">
       <el-form-item label="咖啡图片:">
         <input type="file" @change="getFile" />
       </el-form-item>
       <el-form-item style="padding-left:50px">
         <el-button type="primary" @click="onSubmit">立即添加</el-button>
         <el-button @click="toSelectCoffee">取消</el-button>
       </el-form-item>
     </el-form>

     <!-- 显示上传后的图片 -->
    <div v-if="imageUrl" class="image-preview">
      <p>上传成功！</p>
      <img :src="imageUrl" alt="上传的图片" width="200" />
    </div>
   </div>
 </template>
 
 <s