vue el-upload上传图片组件使用

最新推荐文章于 2025-07-02 10:10:19 发布

&ACE&

最新推荐文章于 2025-07-02 10:10:19 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/weixin_59525879/article/details/132111651

文章介绍了如何在Vue项目中使用ElementUI的el-upload组件进行图片上传，包括文件列表管理、预览、移除和上传成功后的路径处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1创建上传图片

   <el-form-item label="图片" :label-width="formLabelWidth" prop="img">
            <el-upload v-model="form.img" :file-list="fileList" action="放人接口" list-type="picture-card"
              :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handleSuccess"
              :on-change="handleChange" name="img" :limit="5">
              <el-dialog>
                <img w-full :src="dialogImageUrl" alt="" />
              </el-dialog>
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>

2.获取图片路径

const fileList = ref([]);

const dialogImageUrl = ref([]);
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  console.log(fileList, 'file');
};
const handlePictureCardPreview = (uploadFile) => {
  console.log(uploadFile);
  console.log(fileList, 'file');
  dialogImageUrl.value = uploadFile.url;
};
const handleChange = (e) => {
  console.log(e);
};

3上传成功后路径在成功事件里返回

const handleSuccess = (img) => {
  console.log(img);
  console.log(fileList, 'file');

  if (img.status == 1) {
    handleSuccess.img = img.front_file;
    console.log(img.front_file);
  }
};