vue上传图片功能实现

最新推荐文章于 2024-04-28 04:36:18 发布

光头强的工装裤

最新推荐文章于 2024-04-28 04:36:18 发布

阅读量283

点赞数

文章标签： html vue.js css

本文链接：https://blog.csdn.net/Claudia_c/article/details/120282818

版权

本文介绍了如何在Vue项目中实现图片上传的功能，包括使用HTML的文件输入元素、Vue.js的绑定事件以及CSS进行样式调整。

摘要由CSDN通过智能技术生成

vue上传图片功能实现

HTML部分
          <el-form-item label="上传图片：" prop="pictureUrl" class="aa">
            <el-upload
              class="avatar-uploader uploadPics"
              action="#"
              ref="upload"
              :http-request="requestUpload"
              :show-file-list="false"
              :before-upload="beforeUpload"
            >
              <img
                v-if="imageUrl || formLabelAlign.pictureUrl"
                :src="imageUrl || formLabelAlign.pictureUrl"
                class="avatar"
              />
              <i
                v-else
                class="el-icon-plus avatar-uploader-icon"
                style="width: 178px; height: 178px"
              ></i>
            </el-upload>