vue+element-ui实现post方法携带参数上传头像

最新推荐文章于 2023-08-10 18:57:08 发布

小香菜籽

最新推荐文章于 2023-08-10 18:57:08 发布

阅读量990

点赞数

分类专栏： vue项目中的问题（一）文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_46858417/article/details/127394571

版权

vue项目中的问题（一）专栏收录该内容

26 篇文章 1 订阅

订阅专栏

标题

   <el-upload
          class="editavatar-uploader"
          action="/api/imageInfo/uploadImage/"
          :data="this.imgJobNum"  //地址携带的参数
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :file-list="fileList"
          :show-file-list="false"
        >
          <img v-if="imageSrc" :src="imageSrc" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

数据

data(){
return{
fileList: [],
 imgJobNum: { imageJobNum: "" },
}
}

上传前和上传成功的方法

  created() {
    this.imgJobNum.imageJobNum = JSON.parse(localStorage.getItem("baseJobNum")); //本地存储的参数
  },
  methods: {
// 上传头像成功
    handleAvatarSuccess(res, file) {
      this.editForm.baseImage = URL.createObjectURL(file.raw);
      this.imageSrc = this.editForm.baseImage;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === ("image/jpeg" || "image/png" || "image/jpg");
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG、JPEG 或 png 格式!");
      }
      return isJPG;
    },
    }