vue上传图片

 vue后台管理项目经常会遇到表单中上传图片的需求，我们运用element中的upload就可以实现这个功能，效果如下

可以删除，预览

在使用upload之前建议大家去读一边upload的文档，知道每个属性都是干什么的，

减少不必要的麻烦

先看下后端给的接口文档

 再看下我的代码

<el-upload action="/api/admin/uploade" multiple list-type="picture-card" :data="fileData" name="img"
              accept="image/jpeg,image/png,image/jpg" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
              :on-success="handleimg">
              <el-icon>
                <Plus />
              </el-icon>
              <template #tip>
                <div class="el-upload__tip">只能上传jpg/png/jpeg文件，且单个不超过2M</div>
              </template>
            </el-upload>
            <el-dialog v-model="dialogVisible">
              <img w-full :src="imageUrl" alt="Preview Image" />
            </el-dialog>

export default {
  data() {
    return {
      imageUrl: '',
      dialogVisible: false,
      fileData: {   // 额外参数
        id: ''
      },
   }，
    handleRemove(img, fileList) {
      console.log(img, fileList);
    },
    handlePictureCardPreview(img) {//这里需要注意 用的img并不是file，因为接口文档给的是img，我们在upload中定义个name=“img”参数就可以了
      // 检查文件类型
      const isImage = img.raw.type.includes("image");
      if (!isImage) {
        this.$message.error("上传文件类型必须是图片!");
        return false
      }
      // 检查文件大小
      if (img.size > (2 * 1024 * 1024)) {
        this.$message.error(`上传文件大小不能超过10Mb`);
        this.$refs['refUpload'].handleRemove(img);
        return false;
      }
      // 检查文件数量
      if (fileList.length > 1) {
        this.$message.error(`上传文件最大数量为1`);
        this.$refs['refUpload'].handleRemove(img);
        return false;
      }
      this.ImageUrl = img.url;
      this.dialogVisible = true;
    },
    handleimg(res, img, fileList) {
      console.log(img);
      console.log(fileList);
      if (res.code === 200) {
        this.url = res.data.file
      } else {
        this.$message.error(`图片${img.name}上传失败`)
      }
    },
}

到这里就完成了图片上传的操作了