vue实现上传图片

最新推荐文章于 2024-07-20 18:05:54 发布

Code female artist

最新推荐文章于 2024-07-20 18:05:54 发布

阅读量425

点赞数 8

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/2301_81331526/article/details/135688974

版权

文章描述了在Vue应用中使用ElementUI的El-upload组件进行图片上传，包括单个头像和多张照片的上传处理，以及文件大小验证、上传成功回调和错误处理。同时提到了如何使用axios发送HTTP请求到后端API并处理响应。

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

上传图片原生

<el-upload
    class="avatar-uploader"
    :action="uploadurl"
    :data="urlParms"
    :show-file-list="false"
    :on-success="handleAvatarSuccesss"
    :before-upload="beforeAvatarUpload"
    >
    <img v-if="ruleForm.cover" :src="baseurl+ruleForm.cover" class="avatar">
   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
    
data() {
    return {
      // 接口
      action: this.$axios.defaults.baseURL + '/example/images/addImages',
      // 传递的参数
      urlParms: {
        image: ''
      },
    }
}

// 上传成功后的钩子函数
handleAvatarSuccesss(res, file) {
    this.ruleForm.cover = res.data.images
},
// 上传文件之前的钩子
 beforeAvatarUpload(file) {
  //标题图片上传图片的限制和参数的获取
  console.log(file)
  this.urlParms.image = file
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isLt2M) {
    this.$message.error('上传头像图片大小不能超过 2MB!')
  }
  return isLt2M
},

上传多个头像

files

file.file

<el-form-item label="案例照片">
    <el-upload
    action
    list-type="picture-card"
    :file-list="photoList"
    :on-remove="handleRemove"
    :http-request="getFile1"
    >
    <i class="el-icon-plus"></i>
  </el-upload>
</el-form-item>



getFile1(file) {
    this.$refs.upload.clearFiles();
    const isLt2M = file.file.size / 1024 / 1024 < 2;

    if (!isLt2M) {
      this.$message.error("上传图片大小不能超过 2MB!否则会上传失败");
    } else {
      //借助Formdata保存上传的文件
      const formData = new FormData();  
      // 上传接口的后台参数，数据
      formData.append("files", file.file);
      console.log(file.file,123)
      entertestserver.addFiles(formData).then(response => {
        // 获取数据成功后的其他操作
        console.log(response,132465)
        if (response.status == 1) {
          // this.ruleForm.imag = response.data.fileUrl
          //this.ruleForm.imag.push(response.data.fileUrl)
          this.ruleForm.imag = [...this.ruleForm.imag,response.data.fileUrl]
        }
      })
        .catch(error => {
          console.log(error);
        });
    }
  },
  
// 新增/编辑确定
fileJson:JSON.stringify(this.ruleForm.imag)

// 详情编辑
this.ruleForm.imag=response.data.fileList.map(item =>{
  return item.url
})

上传头像单个

<el-form-item label="案例照片">
    <el-upload
      action
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :http-request="getFile1"
      :show-file-list="false"
      ref="upload"
      >
      <img style="width:75px;height:75px;" v-if="ruleForm.imag" :src="baseurl+ruleForm.imag">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</el-form-item>

getFile1(file) {
        this.$refs.upload.clearFiles();
        const isLt2M = file.file.size / 1024 / 1024 < 2;

        if (!isLt2M) {
          this.$message.error("上传图片大小不能超过 2MB!否则会上传失败");
        } else {
          const formData = new FormData();
          formData.append("image", file.file);
          entertestserver.addImages(formData).then(response => {
            // 获取数据成功后的其他操作
            console.log(response)
            if (response.status == 1) {
              this.ruleForm.imag = response.data.images
            }

          })
            .catch(error => {
              console.log(error);
            });
        }
      },
  geturl() {
    //按条件查询
    let data = {
    }
    entertestserver.getString(data).then(response => {
      // 获取数据成功后的其他操作
      console.log(response)
      if (response.status == 1) {
        this.baseurl = response.data
      }
    }).catch(error => {
      console.log(error);
    });
  },